Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] Custom css with multi colums/custom query


  #1  
Old Nov 29, 2013, 10:33 AM
Staysimple
 
26 posts · Nov 2013
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  
Old Nov 29, 2013, 10:54 AM
juggledad's Avatar
juggledad
 
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  
Old Nov 29, 2013, 11:10 AM
Staysimple
 
26 posts · Nov 2013
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  
Old Nov 29, 2013, 12:01 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try looking for a plugin that will do like http://wordpress.org/plugins/ajax-thumbnail-rebuild/
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Nov 30, 2013, 06:02 AM
Staysimple
 
26 posts · Nov 2013
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  
Old Nov 30, 2013, 12:08 PM
juggledad's Avatar
juggledad
 
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  
Old Nov 30, 2013, 01:57 PM
Staysimple
 
26 posts · Nov 2013
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  
Old Nov 30, 2013, 02:25 PM
juggledad's Avatar
juggledad
 
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  
Old Nov 30, 2013, 02:38 PM
Staysimple
 
26 posts · Nov 2013
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  
Old Nov 30, 2013, 02:59 PM
Staysimple
 
26 posts · Nov 2013
Oh ! maybe the i'd of the first post is id=post-135 ...
  #11  
Old Nov 30, 2013, 07:19 PM
juggledad's Avatar
juggledad
 
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  
Old Dec 1, 2013, 05:18 AM
Staysimple
 
26 posts · Nov 2013
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  
Old Dec 1, 2013, 06:08 AM
Staysimple
 
26 posts · Nov 2013
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  
Old Dec 1, 2013, 06:48 AM
juggledad's Avatar
juggledad
 
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  
Old Dec 1, 2013, 07:20 AM
Staysimple
 
26 posts · Nov 2013
It's perfect ! Thank you so much ! I'm happy :-)

Bookmarks

Tags
homepage, juggledad, multi column/custom query, thumbnail for excerpts



Similar Threads
Thread Thread Starter Forum Replies Last Post
Juggledad's multi column/custom query wesleydeboer Center area post/pages 23 Feb 25, 2015 08:01 PM


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


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