SUITS Theme: Header, navigation bar, responsive design
-
Hi,
I recently changed to the Suits theme on my blog and I`m having some little problems. The Happiness Engineers send me her for my problems with CSS customization.
A few questions:
1. The theme is, officially, responsive, but when I checked it on an iPad and iPhone, the header was not being displayed properly (a half appeared), slideshows in my posts showed half of pictures so on. Is there any way to make it work and look good?
2. I used CSS to center the navigation bar. How can I make the text in the navigation bar increase in size without modifying the headings from the Custom upgrade bar (and, so, for page titles, post titles etc.)?
3. Can I shrink the size of the post titles?
4. I want to hide the “Home” title on just the homepage. Is this do-able?
5. Is it possible to post in the Blog page only posts from a certain category? I tried to go around the usual settings and put in the navigation bar a Blog Category Page instead of a standard Page, but, after the last post, a “previous post” link appears and, when clicked, it sends the user to posts from other categories.
6. Is there a way to add a “Back to top” button to a widget, if the theme doesn`t have one?
7. How to shrink the size of the widgets` titles (footer, sidebar)?
8. How can I add a functional Skype button to my “Follow me on social media” text widget?
I tried this code, but it doesn`t work:
<a href="codrin.po?call"><img title="Skype" src="https://codrinpo.files.wordpress.com/2014/12/skype.png" alt="Skype" width="35" height="35" /></a>9. Between the posts on a page and the footer, there`s a 1-1.5 inches white area. Can I hide it or, at least, shrink it?
Thank you in advance :).
Codrin
The blog I need help with is: (visible only to logged in users)
-
Hi Codrin,
First off, I would suggest replacing your existing custom CSS with the following (you had a duplicate). What I’ve done is to limit the centering of the menu to 869px and wider screens/browser windows since at 868px is when the minified menu for touch devices (tablets and phones) activates. Also, the code you had for the menu was keeping the full menu showing at the same time, and the main menu does not work well with touch devices, particularly if you use submenus.
.archive-title{ display:none; } @media screen and (min-width: 869px) { .main-navigation ul{ display:inline-block; } .main-navigation{ text-align:center; } }1. The theme is, officially, responsive, but when I checked it on an iPad and iPhone, the header was not being displayed properly (a half appeared), slideshows in my posts showed half of pictures so on. Is there any way to make it work and look good?
The Suits theme header was not designed with having text within the image, such as what you have. It was designed to have a background image to the text-based title and description, something like on this site: http://santabarbariansandtheircars.wordpress.com/ . That said, we can make some adjustments in the CSS and make the header image resize with the screen/window size, but in doing this, we are relying on the browser to resize the image, and on small tablets and phones, the image is going to be small and fuzzy and not really readable. Add this to the end of your CSS and then give it a try to see what I mean.
.site-header { background-size: 100% auto; max-width: 960px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 768px) { .site-header .home-link, .site-header { min-height: 144px; } } @media screen and (max-width: 600px) { .site-header .home-link, .site-header { min-height: 120px; } } @media screen and (max-width: 480px) { .site-header .home-link, .site-header { min-height: 95px; } } @media screen and (max-width: 400px) { .site-header .home-link, .site-header { min-height: 60px; } }In regard to the slideshow, the theme/WordPress software sizes the slideshow to work best on all screens, and it works fine on my iPad. On my iPhone, it works fine in portrait orientation, but when I switch to landscape orientation, the height is taller than the screen. That is due to the Dreamer’s guide image, which is tall and skinny. The software sizes for width. We can add a media query though so that at screen heights less than 410px (being conservative to make sure all phones are covered) we will resize the slideshow to a maximum height of 310px, so it will safely fit on a landscape oriented phone.
@media screen and (max-height: 410px) { .slideshow-window { height: 310px !important; } }One note on the above, if you view your site on a phone or tablet and then switch orientation, you may have to refresh the page for the CSS we used above to take affect.
-
2. I used CSS to center the navigation bar. How can I make the text in the navigation bar increase in size without modifying the headings from the Custom upgrade bar (and, so, for page titles, post titles etc.)?
To increase the menu font size, add the following CSS and adjust the 14px value.
.wf-active .nav-menu li a { font-size: 14px; }3. Can I shrink the size of the post titles?
To resize the post titles, add and adjust.
.wf-active .entry-title { font-size: 39px; }4. I want to hide the “Home” title on just the homepage. Is this do-able?
Yes, we can target the home page only by using the “home” body CSS class and then using the unique menu item id such as this.
.home #menu-item-2896 { display: none; }5. Is it possible to post in the Blog page only posts from a certain category? I tried to go around the usual settings and put in the navigation bar a Blog Category Page instead of a standard Page, but, after the last post, a “previous post” link appears and, when clicked, it sends the user to posts from other categories.
On a category page, such as http://codrinpo.com/category/blog/, the older posts button should only bring up posts within that particular category. If a post has multiple categories, then that post will show up in multiple categories pages. I’ve tested this, and If I have posts only in, say travel category, and I go to that category page, the older posts button at the bottom brings up only posts in the travel category.
-
6. Is there a way to add a “Back to top” button to a widget, if the theme doesn`t have one?
Sort of. You can use a page jump, but the anchor would have to be placed at the top of the page content (from the page editor), but it will only take you to the top of the content area, where the anchor is. For your reference, take a look at the following support resources.
Page Jumps
Text Widget
Text Widget Links
Linking Images
Image Widgets -
7. How to shrink the size of the widgets’ titles (footer, sidebar)?
Add this and adjust.
.wf-active .widget .widget-title { font-size: 26px; }8. How can I add a functional Skype button to my “Follow me on social media” text widget?
That would require some Javascript in order to transfer over and use the Skype, and user installed Javascript is not allowed here at WordPress.com.
-
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:
-
Hi,
It all works great :). Thank you a lot for this.
I think I didn`t explain good enough what I talking about in question 4.
I do not want to hide the Home button on the navigation bar, but the Home title on the page itself.One quick (other) question:
Between the posts on a page and the footer, there`s a 1-1.5 inches white area. Can I hide it or, at least, shrink it?P.S.: I love the photos you took in Yellowstone.
Thanks again!
-
Ah, #4… I misread. Sorry. Here is the CSS to hide the page title on the home page.
.home .entry-title { display: none; }On your older posts categories page, at the bottom, you will see the older posts button. If you then look at the Blog category page, the space at the end is where the older posts button will be when you have more posts in the blog category. Is that the space you are talking about? If so, we should leave that space there for the older posts button.
If instead, you are talking about the space between posts, such as on the older posts category page, you can adjust the bottom margin for the .hentry, which is currently 4.6rem. The following would target the archives type pages only (category, tag and date archives) since on single post pages, the space below the post doesn’t seem excessive.
.archive .hentry { margin-bottom: 4.6rem; }Thanks on the Yellowstone photos. I have soooo many photos that I need to get organized and posted.
-
When I mentioned the white space, I was referring to the space above the footer. See here: http://bit.ly/WhiteSpaceOverFooter
Two more questions and that`s it (hopefully):
1. One the About me page, can I change the title of the page without changing it in the Navigation menu also?2. How can I increase/decrease the width of the main column, now set at 960?
Thanks again for everything and looking forward for more photos.
-
Yeap, I forgot one important question.
In a slideshow, like the one on my homepage, how can I make the images be displayed on the full width of the main column (in this case on the full page) and, also change the background of the slideshow to a custom color (or at least white)?
I tried changing the background color of the slideshow from the dashboard, but it didn`t work.
-
I changed the color of the background using the slideshow from the Support page, but the caption for the photos are now a sort of white with black edges. Can I change that?
-
Here’s the CSS to change the colour of the text and text shadow for your slideshow captions:
.slideshow-slide-caption { color:#111; text-shadow:1px 1px 1px #777; }You can remove the text shadow if you like by changing that section to
text-shadow:none; -
On the whitespace below, there is a div for comments there. On http://codrinpo.com/2014/07/02/letter-to-myself/ , you will see “Comments are Closed” in that area. On Dreamer’s Guide at http://codrinpo.com/2014/11/13/a-dreamers-guide-to-reality/ where comments are not closed, you see the comment form down there.
I do see the whitespace on all static pages, including the home page. The following will remove the bulk of that whitespace on the home, about and say hi pages where comments are turned off.
.page #comments { display: none; }See how that works and let us know.
-
Hi again,
I’ve done all the modifications you mentions. The one with the white space on static pages doesn`t work unfortunately. And, since the modification to the slideshow (the one with the text didn’t work), a greyish 1 cm space appeared between the navigation bar and header.
Any thoughts on how can I fix these, please?
-
There is a background color set for the .site-header div. In your custom CSS find .site-header and add this declaration to it.
background-color: rgba(0, 0, 0, 0);On your about page, as an example, when I disable this rule, the whitespace at the bottom increases, so it appears that this rule is working – at least for me.
.page #comments { display: none; }If you wish to get rid of more of the whitespace at the bottom of pages, such as about, you can decrease the bottom margin on the content with this:
.page .hentry {
margin-bottom: 4.6rem;
}` -
Thank you all for everything.
It looks much, much better :). Now it`s my job to fill it up with more content.
-
- The topic ‘SUITS Theme: Header, navigation bar, responsive design’ is closed to new replies.
WordPress.com Forums 