Making the right images smaller with spaces inbetween
-
Hi! I just purchased the Monet theme and would love to make the images that shows up on the right smaller with spaces inbetween them. Is it possible? ty!
https://controllercompanies.com/
The blog I need help with is: (visible only to logged in users)
-
Hi there – thanks for the message. do you still want help with this? The site listed above is not running Monet.
If you want help then I think this is possible using the custom css which requires WordPress premium. If you have that then I can give you the css required.
-
Oh hi! I sent the wrong blog as Im currently managing a few blogs.
This is the blog I’m referring to :
https://controllercompanies.com/ -
No problem :)
The css to make the images smaller is:
.main .post-archive article { padding: 10px; }You can change the 10 to whatever number you prefer.
You may want to change some of the colours and whatnot, this can be done with css as well so just let me know what colour etc and I can give you the code for that also.
-
-
Gradients may be possible but they’re quite complex so it depends what you want to do. Solid colours are definitely easiest :)
-
-
Do you mean images beside the menu items? That’s possible with custom css. The code is specific to each menu item though – so if you upload the images to your site, and then paste the links on here then I can give you the css needed.
-
I mean with my current website:
https://controllercompanies.com/
At the left of the website is a list of Menu that links to different posts and catagories, is there a way for each link to display a small thumbnail , especially for the product reviews?
-
Hi – thanks – I fully understand now.
The only way to do this is with custom css. There’s no way to automate this or control this through WordPress so it would be a manual process each time you want to change it.
To do it you would need to upload an image through the media editor, and then insert it using some custom css. However if you change the menu then it’s likely the css will break and so you would need to update it again.
It may work out to be a lot of effort however if you upload a couple of images and give me the links to them I’d be happy to give you some css to show how it would work.
-
I see, well, let me try with one example:
For the Tascam 2X Review, this is the image link
https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.pngcould ya make it into a thumbnail in the menu link for it?
-
Took me a while to find that menu item – is quite deep down in there :)
The css needed is this:
.menu-item-2161 > a:before { display: inline-block; content: ''; background: url(https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png?resize=50,50); width: 3rem; height: 3rem; background-size: cover; vertical-align: bottom; margin-right: 0.3em; }This will need to be done custom for each link you add to the site. You will need to know/ workout the menu id for each link, and if you change the menu then you may need to update the menu ids.
-
Wicked! That’s just what I want! Cheers!
Just one caveat left, the thumbnail seems to be quite blurry, is there a way to put it in a more high-res quality?
-
You can change all the numbers to taste.
For example to make the icon bigger change 3rem to 4rem (or 4.5rem or whatever). The actual thumbnail is a background image, the size is set by the icon container (the 3rem size), however to change the resolution you can change the url path.
https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png?resize=50,50
The 50,50 is the width,height – so a higher resolution image might be:
https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png?resize=100,100
- The topic ‘Making the right images smaller with spaces inbetween’ is closed to new replies.
Premium Theme Support 
