Hi there, I’ll answer your questions in batches. First up:
1) I would like to change the footer font, so that its not just capitals.
I used my browser inspector to find the right element to target. Adding this to your custom CSS will override the default uppercase font:
.site-footer {
text-transform: inherit;
}
2) The divider and title icon (doily like!) that appear at the bottom of the page and next to any headers, I would like to change to be a green solid dot
The button graphic is referenced in two places in the CSS.
Below each post:
.hentry::after {
background-color: #fff;
background-image: url(img/button.svg);
background-position: -46px top;
background-repeat: no-repeat;
background-size: 132px 35px;
content: "";
display: block;
height: 35px;
left: 50%;
position: absolute;
top: 100%;
transform: translate(-50%, -18px);
width: 88px;
}
Below each widget:
.widget-title:before {
background: url(img/button.svg) no-repeat;
background-size: 84px 22px;
background-position: 0 0;
content: "";
display: inline-block;
float: left;
margin-right: .45em;
position: relative;
top: -2px;
width: 22px;
height: 32px;
}
You can override both of those statements in your custom CSS editor, referencing your own image with a full image path and making any other necessary adjustments, such as to the height, width, background-size, and background-position. You can leave out some of the property/value pairs if you aren’t going to change them.
3) I would like to remove the Category Headers in posts. I have added the following code to an installed custom CSS manager widget…
display: none;
}.entry-meta.single-meta {
display: none;
}.entry-author-link,
.entry-permalink,
.entry-date,
.entry-meta {
display: none;
}
… all the header bits have disappeared, but i am still left with the category title?
Not sure if this is a typo, but there’s a stray bit at the top:
display: none;
}
Could you explain a bit more what you mean by “category title” or “category header”? Are you referring to the word “Exhibitions” at the top of this page, for example?
http://www.snaparts.co.uk/glimpses/
If so, this CSS should hide it:
.entry-header .cat-links {
display: none;
}
Amazing thank you so much. 🙂
Just a quick question I think i understand the following
.hentry::after {
background-color: #fff;
background-image: url(img/button.svg);
background-position: -46px top;
background-repeat: no-repeat;
background-size: 132px 35px;
content: “”;
display: block;
height: 35px;
left: 50%;
position: absolute;
top: 100%;
transform: translate(-50%, -18px);
width: 88px;
}
and
.widget-title:before {
background: url(img/button.svg) no-repeat;
background-size: 84px 22px;
background-position: 0 0;
content: “”;
display: inline-block;
float: left;
margin-right: .45em;
position: relative;
top: -2px;
width: 22px;
height: 32px;
}
Does the ” background: url(img/button.svg) no-repeat;” mean that I need to post into the media the image that I want and then the code line would read something like…
background: http://www.snaparts.co.uk/(media file address)(img/button.svg) no-repeat;
? basically what I am trying to achieve is the bottom of the page to have something like this …. and the widget headers to have simply the solid green dot. below is a copy to the what i mean in dropbox (sorry i don’t know how to attach file or images to the blog.
https://www.dropbox.com/s/qyfttspn948vaf5/SNAPArts%20footer.tiff?dl=0
I hope that makes sense?
Thanks so much again
Hi there,
Does the ” background: url(img/button.svg) no-repeat;” mean that I need to post into the media the image that I want and then the code line would read something like…
That’s right, you would first upload the image of the solid green button to your Media Library. From there, navigate to the attachment details for the image in your admin area. Information on how to get there can be found here:
https://codex.wordpress.org/Media_Library_Screen#Attachment_Details
You can copy the URL of your image from there.
The URL will then replace img/button.svg in your custom CSS.
Let me know if that’s clear or if any extra questions come up.
