Hever styling
-
Hi
I have a plan that allows me to add CSS.
This is what I need to change:
1)
How do I move the logo in front of the title of the blog, so they are on the same line?2)
Is there a way to hide the featured images in the blog posts themselves? If no, how do I make them smaller?3)
Is there a way to make the header of each post smaller, and not bold?4)
Hovering over the tag cloud on the start page, I’d like to change the hover colour5)
It would be nice if ‘Weiterlesen -> ‘ at least had a hover colour – even better would be the link colour.6)
How do I set the corners of ‘Mehr Beiträge laden’ to radius = 0?7)
The fields at the bottom of the start page for subscribing and search should have the same height.Thank you for your help
The blog I need help with is: (visible only to logged in users)
-
Hey there,
Happy to help you with this.
- How do I move the logo in front of the title of the blog, so they are on the same line?
The CSS you need is:
/* Move logo to title on same line AL */ header#masthead { display: -webkit-box; }2) Is there a way to hide the featured images in the blog posts themselves? If no, how do I make them smaller?
The CSS you need is:
/* Hide Featured image AL */ .post figure.post-thumbnail { display: none; }3) Is there a way to make the header of each post smaller, and not bold?
Yes, the CSS you need is:
/* Style page/post title AL */ h1.entry-title { font-size: 20px; font-weight: 100; }4) Hovering over the tag cloud on the start page, I’d like to change the hover colour
Yes, the CSS you need is: (please change the colour code to what you need).
/* Change tag cloud hover AL */ p.alignwide.wp-block-tag-cloud a:hover { color: red; }5) It would be nice if ‘Weiterlesen -> ‘ at least had a hover colour – even better would be the link colour.
No problem – the CSS is:
/* Change more link hover AL */ a.more-link:hover { color: #008488; }6) How do I set the corners of ‘Mehr Beiträge laden’ to radius = 0?
Like this, :)
/* Change border radius AL */ button, .wp-block-button__link { border-radius: 0px; }7) The fields at the bottom of the start page for subscribing and search should have the same height.
The CSS for this is:
/* Style Subscribe button AL */ button.wp-block-button__link.no-border-radius { padding: 18px 23px 18px 23px !important; } input#subscribe-field { line-height: 1.5; }I hope this helps! :)
-
I hope this helps
Indeed! :-)
I now deleted the CSS that I had kept from my earlier theme and only kept your code.
Which brings me to more wishes:
8)
Align the title (UB Basel Blog) so it’s on the same height as the bottom of the logo (it was centered before, which is also an option, if “align at the bottom” isn’t available).
9)
Remove ‘bold’ from the title
10)
On the start page, remove ‘bold’ from the titles of the posts
11)
Hover colour for links should never be that bright blue (as for example on next/previous and the links to related posts at the moment); would be fine with me if for the whole site hovering over a link keeps the colour #008488, but adds an underline (as it is at the moment for the tag cloud on the start page)
12)
Links to previous/next:
– Remove ‘bold
– Let me make the text smaller13)
Single blog posts: let me make the text a bit smaller
Thank you so much! -
-
15)
Where can I change the text “Related” above the related posts?
How can I make the text “Related” a bit bigger?Thank you :-)
-
16)
Comment on the single posts:
How do I make the font “Kommentar verfassen” smaller and not bold? -
Hey there again!
Challenge accepted! Ok here goes! :)
8) Align the title (UB Basel Blog) so it’s on the same height as the bottom of the logo (it was centered before, which is also an option, if “align at the bottom” isn’t available).
This CSS should work:
/* Align site title AL */ p.site-title { margin-top: 65px; }9) Remove ‘bold’ from the title
The CSS you require is:
/* Unbold site title AL */ p.site-title a { font-weight: 100; }10)On the start page, remove ‘bold’ from the titles of the posts
This CSS should achieve that:
/* Unbold blog titles home AL */ h2.entry-title { font-weight: 100; }11) Hover colour for links should never be that bright blue (as for example on next/previous and the links to related posts at the moment); would be fine with me if for the whole site hovering over a link keeps the colour #008488, but adds an underline (as it is at the moment for the tag cloud on the start page)
This CSS should change that:
/* Style link hover AL */ a:hover { color: #008488; text-decoration: underline; }12) Links to previous/next:
– Remove ‘bold
– Let me make the text smallerThe CSS here should help with this:
/* Style post navigation AL */ .post-navigation .post-title { font-weight: 100; font-size: 20px; }13) Single blog posts: let me make the text a bit smaller
This CSS could help:
/* Change post font size AL */ .post p { font-size: 15px; }14) In the single posts, a bit less white space above and below the title of the post?
I’m hoping I’m targeting the right area here:
/* Remove white space post/page title AL */ .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after { margin-bottom: 10px margin-top: 10px }15) Where can I change the text “Related” above the related posts?
How can I make the text “Related” a bit bigger?It’s not possible to change the text itself, but this CSS, should help with the size (and other styling):
/* Style JP Related post tag AL */ #jp-relatedposts h3.jp-relatedposts-headline { margin: 0 0 1em; display: inline-block; float: left; font-size: 19pt; font-weight: 700; font-family: inherit; }16)Comment on the single posts:
How do I make the font “Kommentar verfassen” smaller and not bold?This CSS should do the trick!
/* Style comment title AL */ .comment-reply-title { font-size: 18px; font-weight: 100; }I’m hoping this is all ok! :)
Speak soon!
-
Thank you, Adam, that’s amazing.
Just a few details left:
17)
Can I also style the links
– within the blog posts
– in the intro text
– in the footer “@ Universitätsbibliothek Basel”
– in the footer “UB Basel Blog” next to the WordPress icon
– in the text next to the comment field
to look the same = only be underlined on hover
18)
At the bottom of the homepage (and everywhere else), can I change the hover colour of the buttons to # A5D7D2 ?
19)
In the single posts, can I change previous/next like this?
Vorheriger Beitrag
to
< Vorheriger Beitrag
or
<- Vorheriger Beitrag
Nächster Beitrag
to
Nächster Beitrag >
or
Nächster Beitrag ->
(if not, that’s ok)
—-
I can change the size of ‘Related’, but not the weight (tried setting it to 100 and other values). I can live with that, though.
Thanks a lot :-) -
Hey there,
Glad it’s helping!
17) Can I also style the links
– within the blog posts
– in the intro text
– in the footer “@ Universitätsbibliothek Basel”
– in the footer “UB Basel Blog” next to the WordPress icon
– in the text next to the comment field
to look the same = only be underlined on hover/* Swap link underline styling AL */ p:not(.site-title) a:hover { text-decoration: underline; } p:not(.site-title) a { text-decoration: none; }18) At the bottom of the homepage (and everywhere else), can I change the hover colour of the buttons to # A5D7D2 ?
This CSS here, should change that site wide:
/* Change button hover colour AL */ button:hover { background: #A5D7D2 !important; }19) In the single posts, can I change previous/next like this?
It’s not possible to make that change.
It looks like there’s quite a bit of CSS there! With this level of CSS customisation – you may wish to look at full site editing: https://en.support.wordpress.com/site-editor/ whereby you wouldn’t need to rely on CSS.
I hope this helps.
-
Thank you, Adam – perfect :-)
I’m sure this will also help other people who want to tweak Hever.
> full site editing
doesn’t exist in Hever
Kind regards
Manuela
- The topic ‘Hever styling’ is closed to new replies.
WordPress.com Forums 