|
#1
Nov 29, 2013, 10:33 AM
|
|
Hi !
I use MC/CQ to my homepage, I chose one full post above columns and I have 3 columns. For my 3 columns, I would like to display the thumbnail at the top center, and the excerpts centered below the thumbnail.
By default, in Ata 3.7.12 the thumbnail display is left-aligned, and I want to keep this configuration for category pages, but center-aligned only to the home page.
I tried to add this code in the CSS insert area :
Code:
body.page-id-2 div.post-bodycopy img.wp-post-image {
display:block;}
but, of course, it does not work (I tried many of 'div name')
I also like the thumbnail of the post above the columns is much larger than columns...
Can you help me or tell me what the name of the div that I need to call in the css ?
Last edited by Staysimple; Nov 29, 2013 at 10:51 AM.
|
#2
Nov 29, 2013, 10:54 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Try this css
HTML Code:
td.mccq_column1,
td.mccq_column2,
td.mccq_column3 {width: 33%;}
.mccq_column1 img.wp-post-image,
.mccq_column2 img.wp-post-image,
.mccq_column3 img.wp-post-image {
float: none;
margin: 0 20% 5px 20%;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
Nov 29, 2013, 11:10 AM
|
|
Wonderful ! My thumbnails are centered! Thank you !
I will increase their size, so that it takes the entire width of each column, but how can I change the size of the thumbnail above the columns?
this is my homepage : http://www.staysimple.fr/
|
#4
Nov 29, 2013, 12:01 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#5
Nov 30, 2013, 06:02 AM
|
|
Thank you,
It's Ok, Colums have the style what i want, thumbnails have good size !
Now, i want change the css-style of the full post above the colums on homepage without changing the style of others full posts on others pages ( font, img-align ... ) It is possible ?
|
#6
Nov 30, 2013, 12:08 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Quote:
i want change the css-style of the full post above the colums on homepage without changing the style of others full posts on others pages ( font, img-align ... ) It is possible ?
|
absolutely. You just have to determine a CSS selector that is specific to that area. There are two ways to do this:
1) use a code examiner like FireBug and look at that post and see what ID's/classes are uses or
2) view the source of the page in your browser and look at teh ID's/classes that are used.
Once you have this you can code a CSS selector and CSS rules that will only apply to that area.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Nov 30, 2013, 01:57 PM
|
|
Arf, I installed Firebug and I really tried, but I can't determine which is the class that will have an impact on the full post above the colums,
I tried this code but it does not work:
Quote:
.mccq-header_3 img.wp-post-image {
float: left !important;
margin: 10 px auto;
}
|
|
#8
Nov 30, 2013, 02:25 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Where did you come up with that class for the first post ?
What are the ID's and classes for the first post?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#9
Nov 30, 2013, 02:38 PM
|
|
I'm sorry, I do not know at all, I am very beginner in css, I don't even understand your questions, I just want to cry.
I just tried to find the name of the ID of the first post on homepage with firebug and I thought it was "MCCQ-header" ... but, no?
|
#10
Nov 30, 2013, 02:59 PM
|
|
Oh ! maybe the i'd of the first post is id=post-135 ...
|
#11
Nov 30, 2013, 07:19 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You are right the first post's ID is 'post-135' and you could use that as part of the CSS selector…but…what happens if you add another post and it becomes the first one? It might be 'post-236' and then the CSS would not apply.
So do you think you could use the other class you found 'mccq-header'?
If you're a CSS beginner, you should take a tutorial like the ones at http://htmldog.com/guides/css
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#12
Dec 1, 2013, 05:18 AM
|
|
Thank you so much, I found thanks to you and the code that worked is this:
Quote:
td#mccq-header img {
float:left;
margin: 10 px auto;
}
|
I do not know why, I imagined something more complicated !
|
#13
Dec 1, 2013, 06:08 AM
|
|
Oh my god, I have a new problem now, when I click the image I left aligned in the colums post above the colums, the image is not attached to the post ... the title yes.
|
#14
Dec 1, 2013, 06:48 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
when I go to your site, the image in the first post is a big black question mark on a gray background.
Because this is a FULL post what you are seeing is what you would see on a single post page and it seems you have the image linked to a larger version of itself.
If you want clicking on the image to link to the single post page like the title does, edit the post in text mode and change the link.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#15
Dec 1, 2013, 07:20 AM
|
|
It's perfect ! Thank you so much ! I'm happy :-)
|
|