Wordpress Themes - WP Forum at BFA

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 10: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 10: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 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/

juggledad Nov 29, 2013 12:01 PM

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

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

juggledad Nov 30, 2013 12:08 PM

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

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

Staysimple Nov 30, 2013 02:59 PM

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

juggledad Nov 30, 2013 07: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 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 !

Staysimple 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.

juggledad Dec 1, 2013 06: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 07:20 AM

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


All times are GMT -6. The time now is 12:48 PM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.