Change header size font size in Sela Theme
-
Hello! I would like to know the CSS to make more space in the header to accommodate our logo. Also, how do I make the font smaller in one area of the site and not the rest? We would like the font on all the child pages to be smaller. THANK YOU – THANK YOU!
The blog I need help with is: (visible only to logged in users)
-
Hi there, on the header, give the following a try and see what you think. You can adjust the top padding as you desire. The second declaration, background-size, keeps the image from expanding and getting cut off.
You can use the web inspector in your browser to find the related CSS classes and/or IDs for changing text size in different areas of the site. By using the classes or IDs, you can target those text elements only. For example, I used the web inspector to find the relevant CSS class for the Menu labels on your site, which is .wf-active .main-navigation a so I can use that to adjust the font size, which is set at 15px originally like this.
.wf-active .main-navigation a { font-size: 20px; }The .wf-active at the beginning tells me that a custom font is applied to your menu labels. If there was not, then the selector would look like this.
.main-navigation a { font-size: 20px; }If you are not yet familiar with the web inspector tool in your browser, take a look at our support document on How to Find Your Theme’s CSS, which has some brief screencasts to get you started using it. It makes working with CSS much easier.
And here are a few more useful CSS related posts to help you customize your site with CSS:
https://dailypost.wordpress.com/2013/07/25/css-selectors/
http://dailypost.wordpress.com/2013/06/21/css-intro/ -
Thanks for the help! I have mastered changing the font, but still don’t have a clue on the CSS for adding more padding to the header? I am familiar with CSS from learning via WordPress, but need a little more direction on where to find this specific info. Thanks!
-
You can find the selector the same way as you would find the font selector. This rule selects the header with the id masthead.
header#masthead { padding-top: 100px; }You said you wish to:
make more space in the header to accommodate our logo.
But adding top padding to the header won’t accomplish this. Your logo, once added, will appear at the center of your header image. So adding a top padding to the header will push the logo too down, along with the header.
—
As an aside, could you try adding a logo image, then add the following CSS and see if you like the result:
header#masthead { padding-top: 100px; position:relative; } .site-logo { position:absolute; top: 30px; } -
Hi everyone. I am new to WordPress. I am using one of the themes to create a nice music blog. Looks fine. The only thing I want to do is maybe increase the size of the text font a bit. It looks like I can’t do that with the Customize options provided in the free version, so I am prepared to upgrade if necessary. However, if I am understanding the discussion here correctly, I would still have to mess around with code in a CSS to simply increase the point size? There is no WYSIWYG way of doing that?
Thanks in advance for your replies. -
Definitely getting closer! But I still have more space than I would like above/below my logo.
-
-
One more question on the Sela theme – I’m not sure what I “clicked” but now my child page titles are showing up on the main menu bar. I do not want the titles to show on the homepage, only once clicked to the parent page. Thank you!
-
Please go to Dashboard > Appearance > Menus > Primary Menu and see if the child pages are added to the primary menu there. And remove them if they somehow appear in the menu.
Don’t forget to save the menu changes by clicking Save Menu button to the right.
-
Done! Thanks – but now I’ve lost my home button. How do I create a button for the primary menu bar for “home”?
-
Seems you marked your site http://themangoseed.com/ private.
You can add Home menu item from Dashboard > Appearance > Menus > Primary Menu > Pages panel > View All tab > Check Home ( first item under View All tab).
-
Perfect – that worked! Yes, we were getting a little traffic so we wanted to make it private.
-
-
-
hello there! : )
i am trying to upload a header for a friend _ and encountering a couple of problems _
firstly _ the header my friend originally installed won’t disappear when other headers are uploaded _ so that you see two headers instead of the replacement _
secondly _ the measurements for the Sela header are advised as 1180px x 160px but no information about resolution _ i have tried 72dpi and 300dpi but both seem blurred or not as i would expect them _
we would both be very grateful for any advice you can give _ thanks -
hello again _
we’ve resolved the problems!! : )
using the site title instead of the header feature
sorry to have bothered you -
Hi, I have the same issue – my logo is too large for the mobile site and keeps getting cut off.
The website is http://www.vabenepizzeria.com.au .
I’ve tried what @thesacredpath advised, to no avail.
Please help!
-
Hi @vabenedocklands, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking in the Sela Theme support forum at WordPress.org.
For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.
The differences between WordPress.com and WordPress.org.
I did take a quick look at your site, and you can use the following media query to set the min-height of .site-branding to “auto” which should do the trick for you.
@media screen and (max-width: 500px) { .site-branding { min-height: auto; } }
- The topic ‘Change header size font size in Sela Theme’ is closed to new replies.
WordPress.com Forums 