Toujours Theme CSS help

bloggerenn · Member · May 12, 2021 at 2:21 am
Copy link

Add topic to favorites
HI there,

I am looking to do two things on my blog:

– add an image for the bullet points
– make the blog width itself less wide.

Any ideas on how to make this happen? I’ve tried many things but doesn’t seem to work.

Thanks so much!
Sincerely,
Renee

The blog I need help with is: (visible only to logged in users)
csabarakasz · Staff · May 12, 2021 at 2:38 am
Copy link
Hi there,

It seems like you’re using the open-source WordPress software and therefore you need to seek help at these forums:
https://wordpress.org/support/forums/

The forum you’re currently posting is for WordPress.com hosted sites only. If you want to know more about the differences between WordPress.com and the WordPress software you can read this document:

WordPress.com vs. WordPress.org

Hope this helps!
bloggerenn · Member · May 12, 2021 at 6:49 am
Copy link
Oh, so sorry – thanks so much!
bloggerenn · Member · May 12, 2021 at 6:58 am
Copy link
Hmm, I checked and the WP.org forums say to go to the individual support forums for the theme, but when I do (from https://wordpress.com/theme/toujours/support) it is linked here.
Any other ideas of how to reach the proper support forum? Thanks so much!
kokkieh · Staff · May 13, 2021 at 5:55 am
Copy link
Hi there,

You can find the WordPress.org forum for Toujours at https://wordpress.org/support/theme/toujours/

But as this is one of our themes, we’re also happy to help you here.

add an image for the bullet points

Can you point me to a post/page on your site where you’re using bullet points? I don’t see any from a quick scan.

make the blog width itself less wide.

This CSS code should do it:
```
div#primary.content-area {
  max-width: 600px;
}
```
@csabarakasz,

Please don’t refer people to the general WordPress.org forums for help with specific plugins or themes, and especially not for themes that are made by Automattic.

For Automattic themes, feel free to tag for staff, and for other themes, please ask them to contact support for their specific theme directly.
bloggerenn · Member · May 13, 2021 at 7:41 am
Copy link
Hi Kokkieh,

Thanks so much for your help!

For the bullet points, please see this post as an example: https://reneesblend.com/diy-non-toxic-cleaning-recipes/

Thank you for the code for the content width. However I was looking more to make the white blog page as a whole less wide, so more of the background image shows. I hope I explained it better now!

Thanks again!
staff-mckluskey · Staff · May 13, 2021 at 8:50 am
Copy link
Hi there!

For the bullet points, please see this post as an example: https://reneesblend.com/diy-non-toxic-cleaning-recipes/

And where would you like to add an image exactly? If you’re using Block Editor on your site, you could try Table Block. It would allow you to have the list items on one side and images on the other.

I was looking more to make the white blog page as a whole less wide, so more of the background image shows.

Oh, then perhaps this code would be what you were looking for:
```
#page {
    max-width: 800px;
}
```
You can modify the number to the desired width.
bloggerenn · Member · May 13, 2021 at 12:38 pm
Copy link
Hi fresatomica, thanks so much for the help with the width, it worked!

For the bullet points, I mean that instead of the bullet point itself, for it to be an image (I’m thinking a small tiny leaf as the bullet points). I’ve tried something like this but it’s not working:

ul {
list-style-image: url(‘sampleimage.gif’);
}

Thanks a lot!
staff-mckluskey · Staff · May 13, 2021 at 1:47 pm
Copy link
Ah, I get it now!
That is not something we could help you with, I’m afraid, it’s out of the scope of our support. But I have found a thread that could help you:

https://stackoverflow.com/questions/5093427/css-using-images-instead-of-bullets.

Bear in mind that the image has to be hosted somewhere online to use it with the URL.
bloggerenn · Member · May 14, 2021 at 12:56 am
Copy link
Perfect, that worked. :D Thank you so much for all your help!

No items found.