WordPress.org

Support

Support » Themes and Templates » [Resolved] Unique position for circle

[Resolved] Unique position for circle

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins
    Forum moderator

    @anevins

    Yes, you can move a page element anywhere you want with CSS.

    Maniek Fly
    Member

    @maniek-fly

    Could you tell me how can i do it? I can’t find any information about change the position of the circle.

    Andrew Nevins
    Forum moderator

    @anevins

    I guess you could do it with some jQuery;

    jQuery('.hentry').each(function($) {
     random = Math.ceil(Math.random() * 400);
     $(this).css('margin-top', random + 'px' );
    });

    Exampled http://awesomescreenshot.com/09e16of55f

    Michael
    Forum Moderator

    @alchymyth

    anywhere

    can you specify in more detail what you understand under ‘anywhere’ ?
    – random?
    – targeted?

    also review http://www.w3schools.com/css/css_positioning.asp

    Maniek Fly
    Member

    @maniek-fly

    Thanks Andrew, but I didn’t mean ‘random’. I would like to set elements of a page in places determined by me. Thanks alchymyth, I begin to read.

    Michael
    Forum Moderator

    @alchymyth

    a bit of a boost – some code to add specific css classes to each circle, and some starter css codes (based on 7 circles):

    to be added into functions.php:

    add_filter( 'post_class', 'circle_numbers_post_class' );
    function circle_numbers_post_class( $classes ) {
    global $wp_query; if( is_home() ) $classes[] = 'circle-' . ($wp_query->current_post+1);
    return $classes;
    }

    for the style.css:

    .blog #primary { position: relative; height: 600px; }
    .blog .circle-1 { float: none; position: absolute; top: 25%; left: 15%; }
    .blog .circle-2 { float: none; position: absolute; top: 5%; left: 40%; }
    .blog .circle-3 { float: none; position: absolute; top: 25%; left: 65%; }
    .blog .circle-4 { float: none; position: absolute; top: 65%; left: 15%; }
    .blog .circle-5 { float: none; position: absolute; top: 85%; left: 40%; }
    .blog .circle-6 { float: none; position: absolute; top: 65%; left: 65%; }
    .blog .circle-7 { float: none; position: absolute; top: 45%; left: 40%; }
    @media screen and ( max-width: 1200px ) {
    .blog #primary { position: relative; height: 550px; }
    .blog #primary .hentry { width: 190px; height: 190px; }
    .blog .circle-1 { float: none; position: absolute; top: 25%; left: 5%; }
    .blog .circle-2 { float: none; position: absolute; top: 5%; left: 40%; }
    .blog .circle-3 { float: none; position: absolute; top: 25%; left: 75%; }
    .blog .circle-4 { float: none; position: absolute; top: 65%; left: 5%; }
    .blog .circle-5 { float: none; position: absolute; top: 85%; left: 40%; }
    .blog .circle-6 { float: none; position: absolute; top: 65%; left: 75%; }
    .blog .circle-7 { float: none; position: absolute; top: 45%; left: 40%; }
    }
    @media screen and ( max-width: 800px ) {
    .blog #primary { position: relative; height: 400px; }
    .blog #primary .hentry { width: 150px; height: 150px; }
    }
    @media screen and ( max-width: 600px ) {
    .blog #primary { position: relative; height: 300px; }
    .blog #primary .hentry { width: 130px; height: 130px; }
    }

    Andrew Nevins
    Forum moderator

    @anevins

    @alchymyth, Wow that was detailed.

    Michael
    Forum Moderator

    @alchymyth

    this is a shot of the result – actually quite interesting … http://imageshack.us/photo/my-images/713/spunformatting.jpg/

    (I personally don’t like the virtually unreadable menu, and the grey image hover; luckily there is a glitch in the theme where to hover grey-to-color does not work in narrow screens…in ff20)

    Theme Author Caroline Moore
    Member

    @sixhours

    “luckily there is a glitch in the theme”

    Not a glitch, that’s by design.

    Andrew Nevins
    Forum moderator

    @anevins

    I noticed that design for devices that don’t have cursors, very clever 🙂

    Maniek Fly
    Member

    @maniek-fly

    @alchymyth thanks – you very helped me 🙂

    I did it a little differently.

    I added into style.css:

    #post-17.post-17.post.type-post.status-publish.format-standard.hentry.category-uncategorized.no-thumbnail{
            float:none;
            position: absolute;
            top:20%;
            left: 3%;
    }
    #post-15.post-15.post.type-post.status-publish.format-standard.hentry.category-uncategorized.no-thumbnail{
            position: absolute;
            top:0%;
            left: 52%;
    }
    (...)

    This is a little less professional way than your, but it works too.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Unique position for circle’ is closed to new replies.