Gateway theme: how to increase size of headers apart from blog title

thosnevin · Member · Jul 28, 2015 at 3:24 am
Copy link

Add topic to favorites
I want to do the following
1. increase the size of the site description below the blog title
2. increase the size of the widget titles

So far, reducing the font size of the blog title also reduces the widget headers. I’ve tried various different fonts including the default, but the result is the same. The site description remains very very small regardless of font type; the widget title size gets smaller when the site title size is made smaller. I don’t want a large site title header, just big enough to fit all words into the width of a tablet screen without breaking up. I can use CSS customisation, so what can you suggest?
Thanks

The blog I need help with is: (visible only to logged in users)
darrellschulte · Member · Jul 28, 2015 at 5:19 am
Copy link
Hi thosnevin,

Start with the following and adjust as necessary.
```
.site-description {
    font-size: 1.5em;
}

.widget-title {
    font-size: 1.25em;
}
```
thosnevin · Member · Jul 28, 2015 at 6:10 am
Copy link
Thanks daschultemm, seems to have done the trick. Now, the other problem I have is the large title appearing on the pages template (as distinct from blog posts) when viewed on a tablet and normal laptop. How to reduce page titles size? For example, see my About & Contact page. The font seems to be as big as the site title.
darrellschulte · Member · Jul 28, 2015 at 6:18 am
Copy link
How about something like this?
```
.page .entry-title {
    font-size: 1.8em;
}
```
thosnevin · Member · Jul 28, 2015 at 6:23 am
Copy link
That’s just right, thanks again daschultemn, greatly appreciated. Now, the third problem is this: how to change the “More” to “Continue reading…” at the end of the excerpt?
darrellschulte · Member · Jul 28, 2015 at 6:40 am
Copy link
The method to do this replacement is CSS in nature. It basically hides the original text and then displays the replacement more link.
```
.more-link {
    color: transparent !important;
}

.more-link:before {
    content: "Continue reading...";
    font-size: 14px;
    color: #612642;
}
```
thosnevin · Member · Jul 28, 2015 at 6:59 am
Copy link
Once again, beautifully rendered, hearty thanks. darschultemn. I love this theme which I adopted yesterday during the WordPress glitch when the header etc disappeared from the theme I was using (I didnt know at the time about the WP glitch but my blog was due for a makeover anyway.) So, just to proceed with a few more modifications. If you can spare me a little more of your valuable time, these are a few more changes to make the theme really pretty:
1. The image widget: images – especially ones of irregular size – in the sidebar shift to the left and crop off whenever a caption is used. To avoid this non-alignment with the other widgets, I am not using captions, and loading the image widget with “None” for alignment, “n” for sizes and no caption, just a widget header. This solves the problem, but minus the caption. Is there something that can be done to fix this?
2. Category Lists: the CHEVRON for lists in the sidebars is attractive, but some other sort of icon or even another colour for the chevron is needed to show a subcategory of a category because the indentationis not clearly defined.
3. Thumbnails: how to enlarge the thumbnail for the Top Posts and Pages widget.
That’s all for now, I promise. and many thanks.
thosnevin · Member · Jul 28, 2015 at 7:03 am
Copy link
Oh, a mistake, sorry. The image shifts to the RIGHT, not LEFT when a caption is added in the image widget.
darrellschulte · Member · Jul 28, 2015 at 2:34 pm
Copy link
Q1: Can you add an image with a caption?

Q2: Look over these Font Awesome icons and pick one that you prefer over the existing icon (you might want to zoom in on this page — those icons are small!)
```
.widget_archive li::before, .widget_categories li::before, .widget_pages li::before, .widget_meta li::before, .widget_recent_comments li::before, .widget_recent_entries li::before, .widget_links li::before {
    content: "f114";
    color: brown;
}
```
I picked a folder icon, but you can go a different direction. There are lots! Just copy the CSS content value and replace the f114 in the above CSS. If you want a different color for that icon, pick something that you like or if you want the original color again, remove color: brown;.

Q3: This one could be dicey. When trying to increase the size of images, it’s better to go from a big image to a small one, not the other way around. The theme is picking a 40×40 image. The max-width can be increased to about 70px. The thumbnails will become larger but they may lose clarity. It might not be a big deal as the image size is still pretty small.
```
.widgets-list-layout .widgets-list-layout-blavatar {
    max-width: 70px;
}
```
thosnevin · Member · Jul 29, 2015 at 1:42 am
Copy link
After a goodnght’s sleep in the Antipodes, I’m back on board, daschultemn, and many thanks again for trying out a few options.

Regarding 1: captions problem in image widget, you haven’t made any sugestions, so we’ll leave that for the time being.

Regarding 2: the icons and colors suggestions worked well, inasmuch as i’ve selected a different icon and color for most lists except the page list, but the initial question I raised was how to use a different icon for the SUBCATEGORY in the Blog Categories list. Nothing I’ve tried so far seems to work. Is it this bit which needs to show further nesting?.

.widget_categories li:before

Regarding 3: Top post and pages widget resizing to larger size thumbnail. Yes, 70px does render it blurry. The sidebar in tablet screen view for this widget shows a lot of space between the thumbnail and link, but not in the small phone or normal laptop view screens. Don’t know if that info is any help. There is a discussion about this problem at –
https://wordpress.org/support/topic/thumbs-size-for-tops-posts-pages-widget – which might not apply to Gateway theme. I seem to remember the same problem in the first release of Twenty-ten, could be wrong.

In any event, I have enough source to play with, and i will leave this topic unresolved to allow further suggestions. Help with one or two more questions about the Gateway Hero page might arise eventually.
Most grateful, daschultemn
Cheers.
darrellschulte · Member · Jul 29, 2015 at 2:43 am
Copy link
@thosnevin, I guess my question is “Do you want to have an image widget with a caption?” If you do, please add a caption to one so I can take a look.

I may have not understood your second question. Does this CSS address it?
```
.widget_categories ul ul li::before {
    content: "f114";
    color: #915F6D;
}
```
I’ll stare at the third question again.
thosnevin · Member · Jul 29, 2015 at 3:59 am
Copy link
That’s fixed the subcategory, icon and color customisation. Looks terrific (to my eyes, anyway).

As for the image widget with caption problem, it might not be so obvious with this image and caption in the footer, 1st column,
“From the KLW NFC Group” but it is a real problem of alignment with other sidebar widgets, for example, this one:
“Family portraits by T. J. Nevin” – not only has the image moved to the right, it is chopped off at right and so is the caption. Can it be fixed?
Thanks again daschultemn
darrellschulte · Member · Jul 29, 2015 at 4:03 am
Copy link
This looks pretty good — what do you think?
```
figure {
    margin: 1em 0px;
}
```
thosnevin · Member · Jul 29, 2015 at 4:14 am
Copy link
That’s it! Fixed! All that remains is the thumbnail enlargement for the Top Posts and Pages widget. I might check out the Gateway designer, see if his Pro version can fix it.
Cheers and thank you for everything, darschulte. You have been amazing.
darrellschulte · Member · Jul 29, 2015 at 4:27 am
Copy link
You’re welcome.

It was fun. I must say that it was a pleasure to help out, even just a little, on your long-running Nevin blogging project. Good luck on the next two years.

I don’t think I have a solution for the thumbnail enlargement question.
thesacredpath · Member · Jul 30, 2015 at 5:55 pm
Copy link
Hi, on the top posts and pages widget, you can use the following CSS and adjust the size of the thumbnail. Typically I would warn about that fact that the images will lose quality, but in this case they are only 40px square to begin with, so any loss of quality would likely not be noticed. Add the following and adjust the 40px value as desired.
```
.widget_top-posts .widgets-list-layout .widgets-list-layout-blavatar {
    max-width: 40px;
}
```
thosnevin · Member · Jul 30, 2015 at 10:45 pm
Copy link
Yes, thanks, the sacredpath, I have already tried that and it’s not a real solution. At a maximum of 70px, the thumbnails are very very blurry. What I can’t fathom is why the sidebar gallery widget shows all sizes of thumbnails with beautiful clarity, so why not deploy same for the Top posts and pages widget? Or the Related Posts with thumbnails function, which -as I seem to remember- started life with the same problem of tiny 40px images, but was corrected (in 2010?) Does the php need to be modified?
thesacredpath · Member · Jul 31, 2015 at 12:30 am
Copy link
Yes, the theme files would have to be modified. It was the designer’s decision to make the images that size, and the problem with trying to go back and change it to make them larger would change it for everyone using the theme and we would likely have some users that would not like the change. Adding the option to set the size of the images can many times complicate layouts and require a bunch of additional adjustments to other elements so that things still look clean and aesthetically pleasing.

No items found.