Display on start page, theme Twentyseventeen

  • manuschwendener · Member ·

    Hi

    https://swisscoverybasel.blog

    I copied the CSS from https://manuschwendener.ch, but not all settings are as I’d like them yet.

    1)
    For the whole site I would like
    – Links to be in colour #008488
    – Running text to be in colour #46505A

    2)
    For the single blog posts I would like
    – The picture to be clickable = click on the image opens original size of the image
    – The heading to be un-bold

    3)
    For the blog posts on the start page I would like
    – it to look more like https://manuschwendener.ch:
    — title and date to be displayed above the image (and text), date in light grey
    — [unlike on manuschwendener.ch the image should be a square and next to the text – this is already correct]
    — no horizontal lines. The titles will do the separation of the posts
    – be able to style the ‘load more posts’ button

    There’s more, but these are the most important for now.

    Thank you :-)
    Manuela

    The blog I need help with is: (visible only to logged in users)

  • manuschwendener · Member ·

    I don’t see an edit function, so I have to add it here:

    On the start page https://swisscoverybasel.blog it would also be ok for the blog posts to look like on https://swisscoverybasel.blog/blog, but the date should be between the title and the running text.

  • manuschwendener · Member ·

    4)
    Within the ‘Blog posts’ block, I’d also like to be able to change line hight and ideally the font size.

    Reason: font size 3 in Blog posts is too small, font size 4 ist a bit bigger than the font size ‘Normal’ in the Paragraph element.

  • manuschwendener · Member ·

    5)
    CSS to change to font colour of the tag line?

    Thank you :-)

  • manuschwendener · Member ·

    6)
    When I set a word within a link bold, the font colour becomes black. It should stay the same colour as the rest of the link, just bold.

  • manuschwendener · Member ·

    7)
    Both ‘code’ and ‘preformatted’ look ok in the preview, but get lost when I save the page.

    See https://swisscoverybasel.blog/2021/10/14/filter-kombinieren, scroll to the two links almost at the bottom of the page.

    (Why can’t I upload screenshots to this forum?)

    Kind regards
    Manuela

  • manuschwendener · Member ·

    8)
    How do I achieve less paddings before the headers on the static pages?

  • kokkieh · Staff ·

    Hi there,

    Once you create a thread, it’s best not to reply to it again until you get an answer, else it appears as if someone is already helping with the thread, causing both staff and volunteers to miss it. That’s why no one else have replied to you yet.

    Also note that your plan gives you access to both live chat and direct email support for help with your site, including CSS issues. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact. This forum mainly provides support to owners of free sites on WordPress.com.

    I see someone is now helping you via email with this. Please reply to the email Andy sent you yesterday, as we’ll be better able to help you there.

  • manuschwendener · Member ·

    Thank you for explaining, kokkieh

    I prefer the forum, because then others later can profit from the replies. But I’ll follow your advice and then copy the solutions here.

  • kokkieh · Staff ·

    Fair enough. I can try to help you here, in that case. However, I see you have a lot of pre-existing CSS, and there’s a lot of declarations that use !important, which can potentially complicate things – !important causes that rule to override both current and any future CSS you’d add for a particular element, so it really shouldn’t be used if it can in any way be avoided. That will likely limit what we can do here, and it might be better to start with a clean slate.

    That said, let me see what I can do. I’ll post multiple replies for your different questions.

    1)
    For the whole site I would like
    – Links to be in colour #008488
    – Running text to be in colour #46505A

    You don’t need CSS for this at all. You can set your site’s global links and text color from the Colors & Backgrounds panel of the Customizer. But it’s not working because you’re already overriding that setting with existing CSS:

    /* http://bit.ly/2qg7KlY */
.entry-content a {
	color: #006E6E;
	border: none;
	box-shadow: none;
}

.entry-content a:hover {
	color: #006E6E;
}

    for the links, and:

    * {
	color: #2D3741;
	text-transform: none !important;
}

    for the text. So you can either remove the color declarations from those two sections of CSS and use the Customizer color settings, or update that CSS to use the correct color codes.

    2)
    For the single blog posts I would like
    – The picture to be clickable = click on the image opens original size of the image
    – The heading to be un-bold

    Making a picture clickable cannot be done with CSS. CSS only controls how something looks, not how it works.

    To make an image in a post or page clickable, you need to add a link to the image itself, as explained here:

    https://wordpress.com/support/wordpress-editor/blocks/image-block/#link-settings

    What heading are you referring to? I looked at your most recent post, https://swisscoverybasel.blog/2021/10/14/filter-kombinieren/, and the only heading I see is the post title. That post title is not being bolded – it appears darker than the body text simply because it’s larger, which makes the lines making up the letters a bit thicker. There’s no way to compensate for that using CSS, as that’s how the font itself works.

    Same goes for the section “headings” – putting that in quotes because you didn’t use actual heading blocks to create them, but regular paragraph blocks just with bigger text.

  • kokkieh · Staff ·

    3)
    For the blog posts on the start page I would like
    – it to look more like https://manuschwendener.ch:

    Go to Customizer ->Homepage settings, and under Posts Page, select your page titled “Blog”.

    Go back to the Customizer main menu, and go to Theme Options. Under “Front Page Section 1 Content” select that same “Blog” page. Lastly, edit your front page, and remove the blog posts block. That’s how you have it set up on the other site.

    — title and date to be displayed above the image (and text), date in light grey

    If you set it up using a standard posts page instead of the blog posts block, it will display like this automatically, as that’s how this theme is designed to display posts on the posts page.

    If you prefer to stick with the blog posts block, this change can be done using CSS. But moving elements around on the page falls outside of the custom CSS support we provider on WordPress.com. For that type of change you’d need to hire a freelance developer for help with the code.

    — [unlike on manuschwendener.ch the image should be a square and next to the text – this is already correct]

    The square image next to the excerpt is specific to the blog posts block. It’s possible to force this using custom CSS, but that type of change also falls outside of our scope of support.

    So your options here (if you don’t want to hire someone) are to use the blog posts page like you’re using on the other site, in which case the date will be at the top like you want, but the featured images will be the full width of the content area, between the post title and text. Or you can use the blog posts block in a regular page, in which case the images will be square next to the text, but the date will appear at the bottom if you choose to display it.

    The rest of #3, and also #4 really depend on what you decide here, so let me know what you prefer, and we can continue from there. If you decide to go with the regular posts page as on the other site, please make the changes in the Customizer and to the front page I explained above first, so we can suggest the next CSS with those changes already in place.

    Meanwhile I’ll continue addressing your other items :)

  • kokkieh · Staff ·

    5)
    CSS to change to font colour of the tag line?

    You already have CSS for this added:

    .site-description {
	color: #46505A;
	padding-top: 10px;
}

    That’s the fourth declaration from the top in the CSS editor. You can just update that color code to the color you want.

    6)
    When I set a word within a link bold, the font colour becomes black. It should stay the same colour as the rest of the link, just bold.

    This should do the trick (using the color code you currently have specified for links in the existing CSS:

    /* ensure bolded text inside links still use the specified link color */
.entry-content a>strong {
	color: #006E6E;
}

    8)
    How do I achieve less paddings before the headers on the static pages?

    You can use this:

    /* Reduce padding above headings */
h1,
h2,
h3,
h4,
h5,
h6 {
 padding-top: 1em;
}

    The default value there is 1.5em. You can also replace that with a fixed px value if you prefer.

  • kokkieh · Staff ·

    7)
    Both ‘code’ and ‘preformatted’ look ok in the preview, but get lost when I save the page.

    See https://swisscoverybasel.blog/2021/10/14/filter-kombinieren, scroll to the two links almost at the bottom of the page.

    I see what you mean. Would you like it to have a background, like in the editor? This will do the trick:

    /* Add background to code elements, similar to in the editor */
code {
	background-color: #eee;
	padding: 1.6em;
}

    Typically content in a code or pre element is also displayed in a monospace font to further distinguish it from the rest of the text. But Twenty-Seventeen doesn’t do this.

    If you’d prefer to have your code block content to display in a monospace font, you can further add this:

    /* Have content of code block display in monospace font */
.wp-block-code code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
  • manuschwendener · Member ·

    Thank you, kokkieh

    > a lot of pre-existing CSS
    I deactivated some of it, will delete if it turns out I don’t need it.

    > 1)
    > Links to be in colour #008488
    > Running text to be in colour #46505A

    I chose them via the Colour interface, but it doesn’t take. Is there still something overriding it?
    The links are now black and underlined. I’d like them to be #008488 and underline should only be visible during hover.

  • manuschwendener · Member ·

    > underline should only be visible during hover
    Fixed by bringing the old CSS back

    (sorry for the many posts, it is because there isn’t an edit function)

  • manuschwendener · Member ·

    I would like the links to behave the same in the
    – the main menu
    – the left part of the footer
    – the part “Blog-Archiv” on https://swisscoverybasel.blog/kontakt (this one is not SOO important)

  • staff-totoro · Staff ·

    Hi there,

    This thread has gotten a bit lengthy and I see you’ve discussed a few things here so I’m not 100% sure I know what style you want your menu to be. Is it OK to have you clarify here? This is my current understanding:

      links to be #008488 normally with no underline
      When you hover, use #008488 plus an underline

    Is this correct? If so you would use this CSS for the menu:

    /*     Change menu link colors     */
.main-navigation a:hover {
    text-decoration: underline;
}

.navigation-top a {
    color: #008488
}

    This CSS for the links in the left footer widget you are trying to have the same style as what I have for the links in the menu above? Thanks for confirming.

    the part “Blog-Archiv” on https://swisscoverybasel.blog/kontakt (this one is not SOO important)

    I’m not sure I understood this. You are referring to this title here? What are you trying to change about it? It’s not a link so I was a bit confused. You mean the links under it?

    Thanks for confirming.

  • manuschwendener · Member ·

    Thank you, Jerry

    Your code for the menu links is working.

    Now I would like to show which page is the active page = set the main menu point to black, when I’m on that page.

    I used
    .main-navigation a:active {
    color: #000;
    }
    but that’s not changing anything.

    It works on https://manuschwendener.ch/tools, but I don’t know which part of the css for manuschwendener.ch is responsible.

    —-

    > This CSS for the links in the left footer widget you are trying to have the same
    > style as what I have for the links in the menu above? Thanks for confirming.
    Yes

    > I’m not sure I understood this.
    It would be easier if I could add screenshots.

    On the page https://swisscoverybasel.blog/archiv *, I have a part that is called “Kategorien”. This looks as expected.

    In the part “Blog-Archiv”, the links to the single blog posts are not getting an underline when I hover over them.
    As mentioned, this part is not super important.

    Thanks again
    Manuela

    * [I had to rename the slug]

  • aleone89 · Staff ·

    Now I would like to show which page is the active page = set the main menu point to black, when I’m on that page.

    The CSS you would need is: 

    
/* Current menu item colour AL */

.navigation-top .current_page_item > a {
	color: black;
}

<blockquote>In the part “Blog-Archiv”, the links to the single blog posts are not getting an underline when I hover over them.
As mentioned, this part is not super important.
</blockquote>

It looks like there's different blocks at use on the page there, so the styling will be slightly different.

This CSS here should apply an underline when hovered, but it will look slightly different.

    /* Underline links Paragraph block */

    .entry-content a:hover {
    text-decoration-line: underline;
    }
    `

    I hope this helps.

  • manuschwendener · Member ·

    Thank you, aleone89

    And thanks everybody helping me with this.

    As I wrote in 2017:

    wordpress.com forums

  • The topic ‘Display on start page, theme Twentyseventeen’ is closed to new replies.