WordPress.org

Support

Support » Themes and Templates » [Resolved] Disable circle zoom effects on home page

[Resolved] Disable circle zoom effects on home page

Viewing 15 replies - 1 through 15 (of 17 total)
  • I am also having this issue. Would love help.

    Personally, to do this I would disable the featured pages. You can then put circle-shaped images (with the non-circular bits in colour #fafafa to match the theme’s background) and have them link where you like.

    Someone else can perhaps give you the CSS to disable the zooming. But I would question why you would want to enable the featured images at all if you are going to switch off their main feature.

    Thank you for your response and suggestion.

    I do in fact want to disable the featured pages but keep the layout of having 3 columns with subheading, image and snippet of text linking to interior pages. What’s the best way to accomplish this (3 columns)?

    <div class="row-fluid">
    
    <div class="span4">
    image code
    text
    </div>
    
    <div class="span4">
    image code
    text
    </div>
    
    <div class="span4">
    image code
    text
    </div>
    
    </div>

    Thank you very much for the solution electricfeet, however I’m very new to wordpress and am wondering where to put in that bit of code you posted. I understand HTML, but with the theme I heard we are not supposed to edit files or anything.

    For others, what I am trying to accomplish is square images in place of the circular ones. If anyone that understands CSS better than myself could suggest code to disable the zooming it would be appreciated.

    This isn’t CSS, it’s HTML. Just paste it in your WordPress page and fill in the image and text details. They’ll show up on the page in 3 columns.

    Hmm… on the main page? Am I supposed to edit index.php?

    On the right-hand side of your edit post page you will see two tabs: “Visual” and “Text” If you click on “Text,” you will see HTML code for your post. You can enter HTML code there in the appropriate place.

    I tried ElectricFeet’s suggestion and only got one column. Maybe I did something wrong. You could also just insert a 3-column table with HTML (tr and td tags). Anyway, I think the better way to accomplish this is with CSS styling your divs. Sorry I can’t give you that CSS. Maybe someone else here can, but you could also probably find it with a little research.

    Hmm… on the main page? Am I supposed to edit index.php?

    @apollomusic Yes, on the main page. No, no php.

    1. From the wordpress dashboard, select Pages > All pages
    2. Select your home page (or create it)
    3. Click the Text tab
    4. Insert the html above
    5. Change the text in each of the areas (see below)
    6. Add the pictures in each of the areas below, using the Add Media button
    7. Update the page

    You should now have a 3 column layout (on a desktop setup; on a small screen it will fold up again to one column).

    <div class="row-fluid">
    
    <div class="span4">
    INSERT YOUR IMAGE HERE
    TYPE YOUR TEXT HERE
    </div>
    
    <div class="span4">
    INSERT YOUR IMAGE HERE
    TYPE YOUR TEXT HERE
    </div>
    
    <div class="span4">
    INSERT YOUR IMAGE HERE
    TYPE YOUR TEXT HERE
    </div>
    
    </div>

    what should you do if you want to add 4 columns?

    4 columns: Do the same, but have 4 lots of <div class=”span3“> instead.

    6 columns: 6 lots of <div class=”span2“> instead.

    Thanks! I had started to use shortcodes and columns, but that solution was not responsive. Thanks again… looks great now.

    I tried your suggestion and it worked perfectly, however I’d like to display the images in place of the “featured pages” section on the main page instead of on a subpage. At http://www.audiophilerecords.ca/ we have 3 pages that I would link to and I like the way they are set up, however the circle effect on the images just really annoys me on the pages and on posts too.

    So create a home page with your nice boxes in it and switch off the featured page images in “Customize’it!”

    I still don’t get why you’re using Customizr if you don’t like the circles, though. That’s one of the main features really.

    I know this is an older post but I came across it looking for an answer to this same question so I figured I’d post a solution. Having static circles can be accomplished in CSS alone which allows for simply using style.css in a child theme. The code is as follows:

    .round-div {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
        border-color: white !important;
    }
    
    .widget-front.hover .round-div,
    article.hover .round-div {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    By disabling the transitions and transforms the circles now stay static. In my case I had also changed the background to white so I altered the border color as well which changes the rectangular background behind the circle to the color of one’s choosing (white in my case).

    Hope this is of help to others looking for this!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Resolved] Disable circle zoom effects on home page’ is closed to new replies.