Need header code to add 3rd line to banner

[Maine Atheist]

FFRF Maine ffrfmaine.org

Usually this site asks for the name of your forum or the url. It didn't this time so I put it above.

I asked a similar question on April 19, 2014. Great instructions and worked well.

Now I need to know four things:

1 - How to add a 3rd line.
2 - How to position the text up and down.
3 - How to change the font size of the 1st line.
4 - How to add a logo to the banner.

Used the April 19 header code to insert a 2nd line to change the 2nd line font. Worked well. Did not see how to change the 1st line font or how it was entered.

With a change of font and a 3rd line I need to shift the text up and down. It was sent to me in April but didn't see the code in Headers so I could make adjustments.

We have a logo we want to add to the right side of the banner but have no idea how to do that.

Thanks,

Tom

[Tumbleweed]

Jun 1, 2015 18:36:02 GMT -8 Maine Atheist said:

FFRF Maine ffrfmaine.org

Usually this site asks for the name of your forum or the url. It didn't this time so I put it above.

I asked a similar question on April 19, 2014. Great instructions and worked well.

Now I need to know four things:

1 - How to add a 3rd line.
2 - How to position the text up and down.
3 - How to change the font size of the 1st line.
4 - How to add a logo to the banner.

Used the April 19 header code to insert a 2nd line to change the 2nd line font. Worked well. Did not see how to change the 1st line font or how it was entered.

With a change of font and a 3rd line I need to shift the text up and down. It was sent to me in April but didn't see the code in Headers so I could make adjustments.

We have a logo we want to add to the right side of the banner but have no idea how to do that.

Thanks,

Tom

1. & 4.  To add a 3rd line you can just add it in that bit of javascript you have with a different class: (named it subtext2) and since you have that javascript, might as well add the logo you want to add which I have in red and a class of "ban_img". (Kind of jamming it full of stuff but it works.)

<script type="text/javascript">
$('#logo').append('<div class="subtext">Atheists, Agnostics, Freethinkers, and Humanists</div><div class="subtext2">Something else</div><img id="ban_img" src="http://i657./uu300/EliteList/Icons/iconb34.gif" title="Iconb34">');
</script>

2 -3. And you already have some css to control your 2nd line so just add the blue to your css and notice the bolded parts for positioning. In the #logo I changed that to 30px. I think you have yours at 40px.

<style>
#logo{margin-left:100px; font-size:30px;
}
.subtext{margin-left:300px; margin-top:-6px; font-size:20px;
}
.subtext2{margin-left:10px; margin-top:10px; font-size:20px;
}

#ban_img{float:right;margin-top:-50px;
}
</style>

The float right for the logo puts it on the right side but you might have to use margins to position it. (I put a negative margin top to move it up.)

You could also use padding like: #ban_img{float:right; padding-right:50px;
   

[Maine Atheist]

OK, tried to do what you said but could not change the size of the first line that reads FFRF Maine. 

Here is what I have now:

<style type="text/css">

.subtext { font-family: Times New Roman; font-size: 40px; }#logo{margin-left:10px; font-size:40px;}

.subtext2{margin-left:10px; margin-top:10px; font-size:30px;}

#ban_img{float:right;margin-top:-50px;

</style>



<script type="text/javascript">

$('#logo').append('<div class="subtext">Atheists, Agnostics, Freethinkers, and Humanists</div><div class="subtext2">The Maine Chapter of the Freedom From Religion Foundation</div><img id="ban_img" src="http://i1302./ag139/ImagineEquality/e9cf87ca-b5f6-4367-b3ea-cbd64df73fdc_zps3zbeyrvq.png">');

</script>

The text is most likely doing what the above gibberish (no offence to the magic programmers can accomplish)  is telling it to do.

I need all the text lowered so it lines up, more or less, with the DRAFT logo, have a way to change the font size on the first line and align all lines the same distance from the left margin. If you go to our web site you will see the last line is indented more than the others.

Thanks,

Tom
 

[Tumbleweed]

Maine Atheist,

Try this: I had to add !important to the end of the font size to over-ride what you must have set for your logo size elsewhere: By the way, I added a red border around the logo (bolded) just so you can see where it all is on the banner. You can remove that after you are satisfied with it. The two blue parts are what you'll need to adjust if you want it up or down a bit more: 

<style type="text/css">
#logo{width:100%; float:left; margin-top:50px; font-size:40px!important; border:1px solid red;
}
.subtext {font-family: Times New Roman; font-size: 40px;
}
.subtext2{margin-top:10px; font-size:30px;
}
#ban_img{float:right;margin-top:-130px;clear:both;
}
</style>

The above way is frustrating because using margins like that fight against each other.  Another option would of been to put that image that you wan to float right In with your donate button div. Probably would of been easier but first see if the above works out for you.

[Maine Atheist]

Thank you so much,

I still don't understand how it worked but it worked. I still could not change the font size of the first line but the way you set it worked fine.

I tried to lower all the text by changing the px in "margin-top:50px" but nothing changed. The logo was too low so changed the px from -50 in "#ban_img{float:right;margin-top:-175px;" to -175 in small increments. To my surprise I found the text got lowered AND the logo got higher with each change. Setting the px to -175 got both the text and logo where I wanted them.

Here is what the java script looks like now. Hopefully it will tell you why your instructions worked.

Thanks again,

Tom

<style type="text/css"}>
#logo{width:100%; float:left; margin-top:50px; font-size:40px!important;}
.subtext { font-family: Times New Roman; font-size: 40px; }#logo{margin-left:10px; font-size:40px;}
.subtext2{margin-left:0px; margin-top:10px; font-size:30px;}
#ban_img{float:right;margin-top:-175px;
</style>

<script type="text/javascript">
$('#logo').append('<div class="subtext">Atheists, Agnostics, Freethinkers, and Humanists</div><div class="subtext2">The Maine Chapter of the Freedom From Religion Foundation</div><img id="ban_img" src="http://i1302./ag139/ImagineEquality/e9cf87ca-b5f6-4367-b3ea-cbd64df73fdc_zps3zbeyrvq.png">');
</script>

[Tumbleweed]

Jun 12, 2015 16:56:01 GMT -8 Maine Atheist said:

Thank you so much,

I still don't understand how it worked but it worked. I still could not change the font size of the first line but the way you set it worked fine.

I tried to lower all the text by changing the px in "margin-top:50px" but nothing changed. The logo was too low so changed the px from -50 in "#ban_img{float:right;margin-top:-175px;" to -175 in small increments. To my surprise I found the text got lowered AND the logo got higher with each change. Setting the px to -175 got both the text and logo where I wanted them.

Here is what the java script looks like now. Hopefully it will tell you why your instructions worked.

Thanks again,

Tom

<style type="text/css"}>
#logo{width:100%; float:left; margin-top:50px; font-size:40px!important;}
.subtext { font-family: Times New Roman; font-size: 40px; }#logo{margin-left:10px; font-size:40px;}
.subtext2{margin-left:0px; margin-top:10px; font-size:30px;}
#ban_img{float:right;margin-top:-175px;
</style>

<script type="text/javascript">
$('#logo').append('<div class="subtext">Atheists, Agnostics, Freethinkers, and Humanists</div><div class="subtext2">The Maine Chapter of the Freedom From Religion Foundation</div><img id="ban_img" src="http://i1302./ag139/ImagineEquality/e9cf87ca-b5f6-4367-b3ea-cbd64df73fdc_zps3zbeyrvq.png">');
</script>

That's why I said they fight against each other. You change one margin and it will affect the other. It's dance to get them where you want them so I'm glad you worked it out.

My one last ditch effort on that first line text size, if you still want to change it,  is try changing it in your visual editor.

Admin>Themes>Advanced Styles & CSS>Visual Editor>Header (Top)>Forum Banner>Banner Image>Banner Text (You can put a pixel width in there rather than the default sizes.) If this works, though, I'd be shocked because any css in your style sheet should over-ride it.