Help with Modifying Margins/Padding on Bars and a few other things?

Started by mithrandylan, October 11, 2017, 04:13:07 PM

Previous topic - Next topic

mithrandylan

First of all, thanks for this forum!  I have learned a lot reading here and only a week and a half ago I wasn't even sure if I could install smf... anyways, I have smf 2.0 and have been editing the theme ( I made a copy and read over the guide).  I've made a lot of progress and overall, things look how I want them to.  But there are a few things that I'm really struggling to find the relevant part of code for.

It's a little difficult to describe what I am looking to do so I've attached screen snips.

1) I want to decrease margins/padding between the brown bars-- this is ONLY a problem when I click "reply."  See attached pics.

2) I would like to INCREASE margins/padding, just slightly, at the top of each post (see attached pics)

3) I would like to change the background color of the quote box.  I believe I know *where* to do this but every time I change the color code, nothing change on the forum.  So I think I'm doing something wrong.

4) I have green text somewhere where it should be white.  Not exactly sure how that happened.  The dark green text (which you can barely see-- it should be white) is what I've changed all links to be, but those text aren't links)

5) I would like to change the font color of 'Hello Username'

6) It looks to me like the text on the topic view is larger than the text of the post view?  I would like the post view to be as large as the topic view.

Thanks so much!

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mithrandylan

I'm using the default theme--curve, I believe it's called.  I've done some modifications to index.css.

BTW, I've figured out the issue of font size in the post view section.  But still looking for help on the rest. ETA: that's no. 6 on my list, that I've figured out.

mithrandylan

o sheesh I didn't upload all the image files.  Most important file attached (the problem I'm having with margins)

This is, of everything I mentioned, THE most important thing I'm hoping to solve.  Looks like crap, need to close those margins. 

The space between the brown bars is something I'm ONLY encountering when I view the list of posts after selecting to reply to a thread; when viewing the thread itself, everything looks as it should (see file "How margins SHOULD look")

mithrandylan

Was able to figure out how to increase the margin above keyinfo, just added

margin: 0.5em 0 0 0;

So that's crossed off the list.  Still trying to figure out how to close the margins between the brown bars in the post view (see attached pic in post immediately above this)

Gwenwyfar

Are you already using inspect element? It should make it easy to finish the rest of the items.
"It is impossible to communicate with one that does not wish to communicate"

mithrandylan

Quote from: Gwenwyfar on October 12, 2017, 04:03:18 PM
Are you already using inspect element? It should make it easy to finish the rest of the items.

Yes, I am.

I'm willing to give up on the margins that I'd like to close between the brown bars, but here's what's really vexxing me: trying to change the background color of the quotes.

I believe I'm assuming correctly that this is the relevant part of the code to change:
(I've already made a few adjustments to this code as you can see)

/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: 1em;
color: #000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
border-top: 2px solid #291515;
border-bottom: 2px solid #291515;
padding: 1.1em 1.4em;
margin: 0.1em 0 0.3em 0;
overflow: auto;


And I'm guessing that "background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;" is what determines the background color.  So I changed it to just this:

"background: #color;"

and also tried this:

"background-color: #color;"

With no results at all, except that the little quote gif (20x16 " marks) was gone.  Am I missing something?  I feel like of everything I want to do, this should be the most straightforward and it's proving the most perplexing.  All I want is for the quote background to be lighter, more similar to the quote background for the code block.

br360

When you say "background: #color;"

are you actually choosing a specific color?

Should be something like this-

background: #5b5bb4;

mithrandylan

Quote from: br360 on October 12, 2017, 05:08:19 PM
When you say "background: #color;"

are you actually choosing a specific color?

Should be something like this-

background: #5b5bb4;

Yes, I am.  I've tried a few, am going for something very light greyish.  Like #e9e9e9

br360

Make sure you add the ; at the end of it.

Also after you make the change, do a hard refresh (press the ctrl and the F5 keys at the same time)

mithrandylan

Quote from: br360 on October 12, 2017, 05:25:51 PM
Make sure you add the ; at the end of it.

Also after you make the change, do a hard refresh (press the ctrl and the F5 keys at the same time)

Semicolon is definitely there.  I wasn't aware of the hard refresh technique.  But I tried it and still no results.

What's frustrating is that I am able to effect any other part of that code-- I've changed the font size, successfully.  I've changed the border size and color, successfully.  And if I remove the url(../images/theme/quote.png), the quote.png goes away.  It's literally just this one issue that simply doesn't seem to work.

Is it possible that I've inadvertently edited some part of the index.css that makes it so that you can't change the background color of the quote block?  I am very new to this, so I'm not sure how those things work.  I've been very careful with the tweaks I've made but maybe I did something elsewhere in the code that's getting in the way now?

mithrandylan

Just out of curiosity, I attempted to change the color of the code block (as described above, just changed the color code, closed with semi-colon) and I succeeded.  FWIW. 

ETA: I just decided to copy the code for the code block over the section of code that deals with the quote block.  Now the quote block looks like the code block.  That's not the look I'm going for, but it might give me something to go on.

Judging by the replies I've received so far, I'm guessing that this shouldn't be anywhere near as hard as it is?  :D

Sir Osis of Liver


Quote block is here -



/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}



Code block is here -



/* A code block - maybe PHP ;). */
code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #eef;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: nowrap;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}




Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

#13
If you want to remove the white space between the upper/lower borders you've added to post template, do this -

index.css



.windowbg span.botslice
{
display: block;
padding-left: 20px;
background: url(../images/theme/main_block.png) 0 -40px no-repeat;
font-size: 5px;
line-height: 5px;
margin-bottom: -1.0em;
}



and this -



.windowbg2 span.botslice
{
display: block;
padding-left: 20px;
background: url(../images/theme/main_block.png) 0 -71px no-repeat;
font-size: 5px;
line-height: 5px;
margin-bottom: -1.0em;
}



Warning:  this may change things elsewhere that you don't want to change.  Not as strict, but may be safer to do it this way -

Post.template.php



<div class="', $post['alternate'] == 0 ? 'windowbg' : 'windowbg2', ' core_posts" style="margin-bottom: -1.0em;">


Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Gwenwyfar

Instead of editing the template (not really recommended to use inline styles) you can do:


.post_wrapper {
margin: -5px 0;
}


You should also be careful with negative margins, they can have undesired effects.

Edit: Better to use negatives here, to not touch all the background-imaging :P
"It is impossible to communicate with one that does not wish to communicate"

mithrandylan

Quote from: Sir Osis of Liver on October 12, 2017, 06:19:26 PM

Quote block is here -



/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}



egad, that's it!  tysm.  quote background problem fixed. 

mithrandylan

Quote from: Gwenwyfar on October 12, 2017, 07:20:18 PM
Instead of editing the template (not really recommended to use inline styles) you can do:


.post_wrapper {
margin: -5px 0;
}


You should also be careful with negative margins, they can have undesired effects.

Edit: Better to use negatives here, to not touch all the background-imaging :P

sorry, where should I insert this in the code?

mithrandylan

Quote from: Sir Osis of Liver on October 12, 2017, 06:29:28 PM
If you want to remove the white space between the upper/lower borders you've added to post template, do this -

index.css



.windowbg span.botslice
{
display: block;
padding-left: 20px;
background: url(../images/theme/main_block.png) 0 -40px no-repeat;
font-size: 5px;
line-height: 5px;
margin-bottom: -1.0em;
}



and this -



.windowbg2 span.botslice
{
display: block;
padding-left: 20px;
background: url(../images/theme/main_block.png) 0 -71px no-repeat;
font-size: 5px;
line-height: 5px;
margin-bottom: -1.0em;
}



This did the trick nicely!  I was playing aroudn with this part of the code previously and didn't think it was relevant, but I didn't realize you could set negative margins (I had set it to 0).

Any ideas on how to get rid of the dark green font in my info section?

Thanks so much!

mithrandylan

Quote from: mithrandylan on October 12, 2017, 08:03:20 PM
Quote from: Sir Osis of Liver on October 12, 2017, 06:29:28 PM
If you want to remove the white space between the upper/lower borders you've added to post template, do this -

index.css



.windowbg span.botslice
{
display: block;
padding-left: 20px;
background: url(../images/theme/main_block.png) 0 -40px no-repeat;
font-size: 5px;
line-height: 5px;
margin-bottom: -1.0em;
}



and this -



.windowbg2 span.botslice
{
display: block;
padding-left: 20px;
background: url(../images/theme/main_block.png) 0 -71px no-repeat;
font-size: 5px;
line-height: 5px;
margin-bottom: -1.0em;
}



This did the trick nicely!  I was playing aroudn with this part of the code previously and didn't think it was relevant, but I didn't realize you could set negative margins (I had set it to 0).

Any ideas on how to get rid of the dark green font in my info section?

Thanks so much!

Got the text color there figured out.  Problem was it wasn't actually green; I was looking for green colors, it was a really dark grey or something.  But fixed!

Gwenwyfar

Quote from: mithrandylan on October 12, 2017, 07:43:37 PM
Quote from: Gwenwyfar on October 12, 2017, 07:20:18 PM
Instead of editing the template (not really recommended to use inline styles) you can do:


.post_wrapper {
margin: -5px 0;
}


You should also be careful with negative margins, they can have undesired effects.

Edit: Better to use negatives here, to not touch all the background-imaging :P

sorry, where should I insert this in the code?
When adding any new css it is usually better to add it at the bottom of the file, for the same reason your background was not working. In css, rules that come later override rules that come before them. In the above case you can also just search for "post_wrapper" and add the margin in there ;)
"It is impossible to communicate with one that does not wish to communicate"

Advertisement: