Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Yes, you can move a page element anywhere you want with CSS.
Could you tell me how can i do it? I can’t find any information about change the position of the circle.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
anywhere
can you specify in more detail what you understand under ‘anywhere’ ?
– random?
– targeted?
also review http://www.w3schools.com/css/css_positioning.asp
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.
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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@alchymyth, Wow that was detailed.
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)
“luckily there is a glitch in the theme”
Not a glitch, that’s by design.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I noticed that design for devices that don’t have cursors, very clever 🙂
@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.
