SOLVED - Kiki Theme (YuZooThemes) - Image Centering


(Brian Jansky) #1

Hi, I am using the Kiki theme that comes stock with Rapidweaver 7 to build a website for a conference a club I am apart of is sponsoring. I am not using or have installed Stacks or anything third party. I am attempting to add an image in with the text but cannot get the images to be center justified. When I highlight the image and click center justified it moves to the center but when I go to preview the page they are back to left justified (and are still left justified when I publish the page). Is there a trick to this?

This is the page if it helps:
http://bayoucitylimited.org/Activities/Activities/Contests.html

Thanks,
Brian


(scott williams) #2

Hi Brian,
I don’t have that theme but here’s what I would do

  1. look in the theme options and see if there are any settings for default image placement that may be overriding your centering.

if there are not and you want to center all the images on a page, you can override it in the css area of the page inspector .

it looks like the class is: .imageStyle
To center just set the margin-right and margin-left to :auto.
You may also want to add padding top and bottom while you’re at it. exp.: padding-top: 10px;

You may need to add: !important if it is still being overridden. exp: margin-right: auto !important;


(Michael Frankland) #3

Great input by @swilliam there… hope that helps @BrianJ844

If it doesn’t work… please add this to the page’s CSS in the page inspector under “CSS”:

img {
    display: inline;
}  

Let us know how it goes and if you need anymore help!


(Brian Jansky) #4

Hi, I don’t really follow what Scott is saying. How would I combine what you’re saying into code I need to put into the CSS? Im sorry, but I have not coded before.

Michael, I have added what you sent me to the CSS tab of the page inspector but it doesn’t seem to have any effect.

Have I added it correctly? As you can see, rapidweaver’s preview still has it left justified and so does the preview in google chrome. I have not tried uploading this though.

Thanks for the help on this,
Brian


(scott williams) #5

Sorry

.imageStyle{
margin-right: auto;
margin-left: auto;
}

If it doesn’t work try adding !important between auto and ;

Yes in the page CSS if for that page only, in sitewide code CSS if for whole site.

You should see result in preview


(Brian Jansky) #6

Cool, thanks Scott. I assumed it was supposed to look something like that but never tried in with that exact set up. I will give it a shot this evening and report on the results. Thanks again for the help.

Brian


(scott williams) #7

If it doesnt work publish anyway and give URL and I will have another look


(Michael Frankland) #8

Yes - a link will help @BrianJ844 then we can go from there :slight_smile:


(Brian Jansky) #9

Scott / Michael,

Scott’s .imageStyle code worked perfectly! Thanks for all of the help. Oh and the page this was being done on is the link I posted in the first message.

Thanks again for the help!


(scott williams) #10

Happy it’s sorted for you.

May want to add “solved” to the title in case others need the same solution.


(Brian Jansky) #11

Done, thanks for the help!