Wordpress Themes - WP Forum at BFA - [SOLVED] Custom css with multi colums/custom query

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)

- - [SOLVED] Custom css with multi colums/custom query (http://forum.bytesforall.com/showthread.php?t=21197)

Staysimple

Nov 29, 2013 09:33 AM

[SOLVED] Custom css with multi colums/custom query

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 ?

juggledad

Nov 29, 2013 09:54 AM

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%;

}

Staysimple

Nov 29, 2013 10: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/

juggledad

Nov 29, 2013 11:01 AM

try looking for a plugin that will do like http://wordpress.org/plugins/ajax-thumbnail-rebuild/

Staysimple

Nov 30, 2013 05: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 ?

juggledad

Nov 30, 2013 11:08 AM

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.

Staysimple

Nov 30, 2013 12: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;
}

juggledad

Nov 30, 2013 01:25 PM

Where did you come up with that class for the first post ?
What are the ID's and classes for the first post?

Staysimple

Nov 30, 2013 01: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?

Staysimple

Nov 30, 2013 01:59 PM

Oh ! maybe the i'd of the first post is id=post-135 ...

juggledad

Nov 30, 2013 06:19 PM

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

Staysimple

Dec 1, 2013 04: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 !

Staysimple

Dec 1, 2013 05: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.

juggledad

Dec 1, 2013 05:48 AM

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.

Staysimple

Dec 1, 2013 06:20 AM

It's perfect ! Thank you so much ! I'm happy :-)

All times are GMT -6. The time now is 06:51 AM.