tagline help

Well, actually adjusting the tagline isn’t too hard. You need to decide where it should go and how it should look tho. Normally the tagline would go in the header, maybe to the right, but with how long your tagline is, iot would probably break to 2 lines.

So you could either move it to the header, or leave it where it is and style it….. but it would probably need some kind of graphic background, or Font enhancement or something…..

oh ok, is there any chance you could teach me how to either break this into 2 lines, or make it just look neater and more tidy by having that tagline more aligned???

thanks

well, after looking through your css, you really have nothing special applied to the tagline so it’s just picking up default css

You can add

#branding {
    css code;
     }

to your style.css (probably in the header section) to style the tagline, then figure out what you want to do

#branding {
     text-align: center;
     color: #752b8e;
     font-style: italic;
     text-decoration: underline;
     font-size: 18px;
     }

is an example for you, it would center, make it purple, italics, larger font (18px) and underlined

I just did that to show you some examples, you can add, delete, change, etc

Hey,

i dont know where this #branding thing is that you have quoted above!!

sorry could you help me more :p i am an amateur at this wordpress thing and just getting to grips with it all

Thanks

#branding is the name of the element applied to your tagline in your source code in your header.php file.

so, adding it to your style.css file in your theme editor will allow you to style the #branding element, which is your tagline.

If you paste this into style.css where you see HEADER

#branding {
     text-align: center;
     color: #752b8e;
     font-style: italic;
     text-decoration: underline;
     font-size: 18px;
     }

It will style your tagline. You can then adjust things to your liking.

https://www.w3schools.com/css/default.asp

Has lots of css tutorials for you to see what your options are

hi, i have slightly edited it now, by margin-left but i want the right hand side of it to come is as well so it is inline with the blogs! however i try margin-right: (number)px, however this does not shift the text to the left to help align it all!

help?

this is what i have entered
#branding {
text-align: centre;
color: #black;
font-style: italic;
font-size: 18px;
margin-left: 119px;
margin-right: 120px;
}

thanks

in css centre is spelled center, but you don’t need text align center if you are using the margins

color, use either black or #000000, not #black

as for the right margin, rather than using margins, I would recommend just applying a width to the whole thing maybe?

#branding {
text-align: center;
color: #000000;
font-style: italic;
font-size: 18px;
width: 700px;
margin: 0 auto;
}

you may have to play around with that widtha bit and see what looks best. 700px was just a starting guess. The margin: 0 auto centers the div after applying the width

remember after changing and saving your css, to press ctrl+f5 on your keyboard to refresh your browser so you can see your changes

oh ok, well i just realised that the screen i currently use at work is slightly old and also the computer is old (and so is the browser) this means that even though it may look fine on my screen it will look off on my colleagues screen. therefore i will have a more detailed play around later when i get home, i will bear your advice in mind whilst carrying out any necessary changes.

I may eventually need to ask more questions later today/tomorrow and i hope you dont mind helping me!

instead of the 700px for the width, i changed it to 75%

is this recommended?

thanks again for all help so far ??

yeah, percentages are great in some situations, they work well in this one… good call!

borders can be effective too, you may want to consider adding one to the top, bottom, or both.

any luck on the right margin thing??

also i have another question, if you go to the case study page, you will see that i currently have 3 separate case studies on there. however i was wondering whether there was any way of me inserting a physical line of some sort in order to “seperate” them from one another.

This is just to make it look more tidy by seperating them from one another.

Thanks

I remember you getting help with the lines, but are you still trying to get that title moved over to the right?

padding-left: 125px;

seems pretty good on my test