Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing.
One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum width of 150. However, this template also affects text posts on the index page, resulting in all index page images having borders and a max width of 150px, which is not intended.
Fortunately, there is a specific code on Tumblr that allows me to execute certain actions if someone is viewing the index page. Therefore, I am wondering if there is a way for me to create a second div that overrides the border and size rules set in the first div. Here is what my code looks like:
.text img{ //for individual pages
max-width:150px;
padding: 3px;
margin: 0 5px 3px 0;
border: 3px solid #52B472;
}
.notpage img{ //for index page
max-width: 500px;
border: none;
margin: 0px;
padding: 0px;
}
HTML:
<div class="text">
<div class="notpage">
In an ideal scenario, this nested div would not include any borders or restrictions on image width.
</div>
</div>
Unfortunately, the CSS from the 'text' div is affecting the 'notpage' div as well. Does anyone have a solution to negate the CSS settings of the first div within the nested div?