Just diving into the world of HTML/CSS and I've been working hard on creating my own Tumblr theme (almost finished!). One issue I'm having is styling the replies, which are in blockquote form. I want them to display one after another in a line like rectangles (similar to forum posts), but I can't figure it out. Right now, they're stacking inside each other as default:
You can see what I mean...1
Any ideas or suggestions would be really appreciated. Thank you so much :)
The {Caption} variable does not allow for manipulation, so a script is necessary for any changes. However, there is a plugin that can help achieve this, which you can find at un-nest tumblr captions.
If you take a look at the code of the new default tumblr theme, you'll notice several undocumented variables they used to accomplish this task.
Here's an example of the code they have for a photo post:
{block:NotReblog}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
<div class="post-reblog-header">
<div class="post-avatar">
<div class="post-avatar-wrapper">
{block:IsActive}
<a class="post-avatar-link{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
<img class="post-avatar-image" src="{PortraitURL-64}">
</a>
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive reblog-avatar{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}">
<img class="post-avatar-image" src="{PortraitURL-64}">
</span>
{/block:IsDeactivated}
</div>
</div>
{block:IsActive}
<a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}</a>
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive post-tumblelog-name">{Username}</span>
{/block:IsDeactivated}
</div>
<div class="post-reblog-content">
<div class="post-body">
{Body}
</div>
</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
It's worth noting that in my testing with the above code, changing {Portrait-64} to any other standard tumblr avatar size will revert back to the avatar of the blog you're currently on.
Is there a way to toggle the selection of data in my code? Currently, when I click on the data it gets selected and a tick image appears. However, I want it so that when I click again on the same data, the tick will disappear. How can I achieve this func ...
My current code includes an overlay over images, but the overlay extends beyond the image itself and covers the padding area as well. If I switch the padding to margin in order to eliminate this unnecessary overlap, it causes the last image to be pushed on ...
Can someone assist me in configuring the bootstrap div col-xs-2 to match the layout shown in the images provided? Your help would be greatly appreciated! Thank you in advance. https://i.stack.imgur.com/afd0p.png https://i.stack.imgur.com/0BGum.png ...
I'm struggling to align two components using the <div display='table-cell'> method. The first component is showing a gap at the top which I want to remove in order to have them aligned perfectly. Check out the JsFiddle example here: h ...
I'm finding it challenging to integrate an HTML template into React. The template I am using is for an admin dashboard with multiple pages. I have successfully copied and pasted the HTML code into JSX files and fixed any syntax issues. Here's wh ...
In my app.js file, I will be sending data to an EJS file. app.get('/', function (req, res){ Blog.find({}, function(err, fountItems){ Blog.insertMany(defaultBlog, function(err){ }) } res.render( ...
I am currently experimenting with creating an image that fades in along with its background when clicked using the :target selector. (Similar to Lightbox: , but done purely with CSS). Here is the HTML: <a href="#firstimg"><img src="img/thumb-3.j ...
I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...
Help needed with adding icons to buttons! I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you! Example: ...
I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...
I have implemented the formslider library for a form on my website. In the demo, the slide transitions to the next set of questions based on a click event triggered by radio buttons (answers). However, when I attempted to include checkboxes for users to s ...
My goal is to save webpages offline for future use, but when I download them as html many of the included components disappear! I attempted opening them in a WebBrowser and downloading as html with no success. One potential solution is to download the ht ...
I'm looking to add screen-in-screen functionality to my HTML5 game, and I have an idea for how to approach it: //Function called every frame function draw(){ set a mask rectangle only draw pixels from the current frame that fall within this recta ...
I am currently using tables to display my items, but I want to switch to flexbox. However, when I tried using flexbox, the item widths were not dependent on their content. Any suggestions on how I can achieve this? Thank you in advance. Here is a snippet ...
Is there a way to hide the tiny, fixed scrollbar that appears at the bottom of an <iframe> with overflow-x: scroll, even when there is no content to scroll, while keeping the transform: translate3d(0px, 0px, 0px) style set? I am unable to modify the ...
Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To ach ...
As I work on creating a rating component that utilizes react-icons to display icons, I have encountered an interesting challenge. Currently, I am using the FaStarhalf icon which represents a pre-filled half star that can be flipped to give the appearance o ...
Hello everyone, I'm encountering an issue with a jQuery selector. Here is the HTML code snippet: <div id="Id_Province_chzn"> <a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1"> <span> + this.default_tex ...
When developing a selenium-java script, I encountered an issue while trying to assert the text "Export All". The spaces between the HTML tags are causing difficulties in asserting it. I am seeking assistance in writing the xpath for this scenario. Can any ...
Can you link a website to an Access database? I currently use an Access database in Visual Basic and I want one database for all my applications. Is this possible? If so, does anyone have any code or examples to share? ps: This is for a school project, so ...