Grid Format – different page, different formatting?

This is a strange one, I have the short code embedded in 2 different page and once is reading the CSS for mating from the directory/ui-front/style.css correctly and the other is not.

the first one is the index page. I have this code in the body area to show the directory listings in grid format:

<?php echo do_shortcode('[dr_list_categories style="grid"] '); ?>

Ive formatted the stylesheet and it looks just like I want it. (see link below)

http://houstonhomeandlandsource.com/

But then I added the short code to a new page in the dashboard, pasting only this in the body of the new page and saving/publishing it:

[dr_list_categories style="grid"]

The problem is that the grid on the new page doesnt get all the formatting. Its pulling some of its info from the regular style sheet from the themes h2 among a few other things. There is also a “>” in there that I cant seem to find. (See link below)

http://houstonhomeandlandsource.com/business-listings/

If the are both using the same short code and pulling in the same info, shouldn’t they look alike on both pages?

  • Dean Kaus
    • The Bug Hunter

    Hi @neuroticartist I’ve had a similar problem and it must have gotten buried as the problem is still there.

    What happened with me appears to be similar to your site where there is a different amount of information in each box or cell. I started to look into the code and then got distracted with other work. Let me see if I can find a solution and I’ll get back with you here. in the meantime if @acnu or @timothy knows if the developer of the grid theme has received any of this information that may help pas well.

    I’ll get back as soon as I can.

    BTW just out of curiosity did you try to past the line that worked in the first page to the second page?

  • neuroticartist
    • Design Lord, Child of Thor

    Thanks Dean, I havent tried to use the same code because the one in the index is hard-coded using the php echo and the 2nd one is using short code because the page template is used for several things, so I cant really hard code it in there. It is, although, the exact same code (minus the php echo part).

    When I look at it in firebug it is wanting to use other h2 styles etc. I see where it is pulling in the styling from directory/ui-front/style.css but most of it is actually crossed out (Im assuming because WP is using other styles first).

    Im not too familiar with things like ” !Important” but I tried that in the css and it didnt seem to work.

    Im really curious about the “>” thats in there. not sure where its coming from

  • Dean Kaus
    • The Bug Hunter

    @neuroticartist I did notice that in the page where everything looks great the amount of content in each box is more consistent vs the other one where the box size is very different. They would line up nicely if you had the smaller box's first and then the larger ones or vise versa. Something that hopefully will be addressed in a future update of the Grid.

    Try this and see if this will help out. Let me know.

  • neuroticartist
    • Design Lord, Child of Thor

    Im not sure I understand what you mean about the amount of content in each box is more consistent, theoretically, its the exact same content, being pulled in by 2 different pages. One cant be adjusted with out affecting the other. Am I mis understanding what your saying?

  • Dean Kaus
    • The Bug Hunter

    Sorry I forgot to tell you where to locate and edit this file. In the dashboard Select Plugins – then scroll down to the plugin named MarketPress Product Grid Shortcode Select the edit option This will open the editor, on the far right of the screen you will see Plugin Files, select the one named marketpress-grid/grid.css

    that is where you’ll edit as described in the above post.

    Hope this helps

  • neuroticartist
    • Design Lord, Child of Thor

    also, I dont know if this matters but your working in the market press plugin and Im using the latest Directory plugin. The CSS code for this is

    .dr_list_grid h2{
    font-family: Crimson%20Text; /* google fonts plugin */
    font-size:18px;
    background-color: #512604;
    padding: 3px 4px 4px 10px;
    margin-bottom: 8px;
    border-radius: .3em;
    }

  • Dean Kaus
    • The Bug Hunter

    No Problem, I may not have explained it so well. In some of the box's there are maybe 6 items listed and in others there are only 2 or 3. so the box gets resized according to the contend places inside the box. Since the box's are paginated according to size if they are not simular then it throws off the whole grid when displayed. So my quick work around for this is to force the boxes minimum size to be larger so that will help keep a consistent look.

    I also noticed that it appears that in the first site that the box's are formatted to the top of each box. While your second page appears to be bottom formatted. Not sure where or how that happens.

  • Dean Kaus
    • The Bug Hunter

    Sorry I totally need a beer! I missed that however I would imagine that the problem would be something similar.

    As my last post (before I read your last response) It does appear that the cell/box/grid or whatever it’s called does seem to be off. Figuring out why that is happening may automatically solve the layout issues.

    I’ll try to download the directory and see if I can find something.

  • Arnold
    • El Macho WP

    You’ve written something in RealEstate2/custom.css which is overiding things. For instance the > you complained about is actually a bullet image, not a character.

    Remember that css in files loaded after the directory css will override things there.

  • Dean Kaus
    • The Bug Hunter

    Hey Roz I’m pretty sure that it must be something in the theme or theme styling that is causing the issue. Any changes you made in the css that appears to be working on the front page you may want to try to add the !important statement at the end and see if that will keep your customization from being overwritten

  • neuroticartist
    • Design Lord, Child of Thor

    using that does seem to help some but I still cant figure out why its pulling in the #content li from the theme style on this page when on the index page the first thing it pulls is the .dr_list_grid li – that seems to be a lot of the format issue and why it has the > or the bullet image as Arnold pointed out.

    I mean if both pages are in the same directory (the index and the page.php), both pulling the exact same thing, shouldnt they both look the same? why would one pull some different styles and not the other one?

  • Dean Kaus
    • The Bug Hunter

    Sorry @arnold and @neuroticartist I apparently didn’t refresh this page before my last comment.

    Not looking at the code at all and just at the pages themselves what had me stumped is how on the main page all of the content (within the business listings) seems to be properly formatted within each box. Top left justified.

    However on the actual Business listings page the content seems to be bottom left justified.

  • Dean Kaus
    • The Bug Hunter

    Roz, It’s my understanding that the !important statement when added in CSS will keep any other CSS from overriding it. Possible @arnold can confirm or correct me here.

    I mean if both pages are in the same directory (the index and the page.php), both pulling the exact same thing, shouldnt they both look the same? why would one pull some different styles and not the other one?

    I’m not familiar with the realestate2 theme but am wondering if there is a option setting somewhere for page layout or such.

    Sorry I wasn’t more help. I have a client just arrived so I’ll check back later.

  • Dean Kaus
    • The Bug Hunter

    Hi Roz, In between clients and thought I’d check up. Have you checked with your theme company support? I’ll test it with one of my custom themes that has different options for the home page vs secondary pages and see what happens there.

    Just another thought have you tried a standard font like times new roman or such

  • neuroticartist
    • Design Lord, Child of Thor

    yeah Dean I think Arnold nailed it, if its got a content div around it I can understand why its formatting via that first and ignoring from there, but if the grid layout is in a dr_list_grid div, shouldn’t it still be reading that formatting? Im still not exactly sure how its playing out

    Ive tried text changes among other things but none of it really changes it.

  • Arnold
    • El Macho WP

    Looking at your CSS the last file to load is

    http://houstonhomeandlandsource.com/wp-content/themes/RealEstate2/custom.css

    so it is overriding anything that comes before. so you will need to make changes there to either remove or override the earlier stuff. You need to use Firebug or Chrome so you can see the hierarchy of the CSS and which files a particular piece of CSS is coming from. For example the image making your > is defined twice so you’ll need to get both instances fixed.

    There’s no easy fix, you just have to slough through it and find the interference. Your particular theme seems to think it needs to control everything in minute detail.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.