WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Disable circle zoom effects on home page (18 posts)

  1. artboxcreative
    Member
    Posted 1 year ago #

    How do I disable the zooming effects on the homepage?

    Would prefer simple static circle images.

  2. apollomusic
    Member
    Posted 1 year ago #

    I am also having this issue. Would love help.

  3. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  4. artboxcreative
    Member
    Posted 1 year ago #

    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)?

  5. ElectricFeet
    Member
    Posted 1 year ago #

    <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>
  6. apollomusic
    Member
    Posted 1 year ago #

    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.

  7. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  8. apollomusic
    Member
    Posted 1 year ago #

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

  9. rxon
    Member
    Posted 1 year ago #

    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.

  10. ElectricFeet
    Member
    Posted 1 year ago #

    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>
  11. asanti75
    Member
    Posted 1 year ago #

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

  12. ElectricFeet
    Member
    Posted 1 year ago #

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

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

  13. artboxcreative
    Member
    Posted 1 year ago #

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

  14. apollomusic
    Member
    Posted 1 year ago #

    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.

  15. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  16. slackcc
    Member
    Posted 8 months ago #

    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!

  17. bwooster47
    Member
    Posted 5 months ago #

    The last post is of great help - transitions are pretty much useless on a touch device like a tablet and smartphone anyway.

    But - the given CSS fixes the images at the smaller size. If there is a way to make the images be displayed at the maximum size (after the transition), that would be great on a small device.

    The tablet displayed can be mimiced on a desktop by reducing the width of the browser window - make it 6" or less approximately.

  18. hugo_alva
    Member
    Posted 5 months ago #

    Are you telling me how he could help change the image of the home, these circulars that are within the 3 columns?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic