Styling PHP-generated Content?

  • gnruble

    (@gnruble)


    11 years, 9 months ago

    I have three blocks of text (Categories/links to posts) at the bottom of my page and I’d like to style each one to better represent their corresponding categories.

    However, they’re all generated from a PHP file, so they’re all under a single CSS class – and even when I try to add some style to that, nothing happens.

    Would there be any way for me to style each one separately using just CSS or without getting into any hardcore PHP coding?

    Here’s the PHP code:
    Maggie Tiny Categories

    Here’s the link to my site (it’s the bottom-most category list; Android, Microsoft, Apple):
    TechPounce.com

Viewing 6 replies - 1 through 6 (of 6 total)
  • s_ha_dum

    (@apljdi)

    11 years, 9 months ago

    You have the ‘alpha’ and ‘omega’ classes on the first and last item respectively. Since you only have three links that should do for you.

    Thread Starter gnruble

    (@gnruble)

    11 years, 9 months ago

    Thanks, but what would the class be for the CSS? I’ve tried every combination of everything I could think of, with and without !important and I still can’t get anything to change.

    s_ha_dum

    (@apljdi)

    11 years, 9 months ago

    alpha and omega are the CSS classes. If you don’t see the changes you expect increase specificity until you do. .alpha to .home_widget .alpha to #primary .home_widget .alpha or the other direction .alpha a

    Thread Starter gnruble

    (@gnruble)

    11 years, 9 months ago

    Sorry to keep bothering you – I’m finally getting somewhere, but now whenever I change the properties of any of the three classes, it just chooses one and styles all three blocks that way.

    Here’s what I have:

    .alpha .tiny-list {
background : url('http://techpounce.com/wp-content/uploads/2012/07/Android-BG.png') !important;
}

.omega .tiny-list {
background : url('http://techpounce.com/wp-content/uploads/2012/07/Appl-BG.png') !important;
}

.block_11 .tiny-list {
background : url('http://techpounce.com/wp-content/uploads/2012/07/Win-BG.png') !important;
}

    Why would it be doing that?

    Thanks

    s_ha_dum

    (@apljdi)

    11 years, 9 months ago

    Your last line is over-riding the other two. 

    .block_11.alpha .tiny-list {
background : url('http://techpounce.com/wp-content/uploads/2012/07/Android-BG.png') !important;
}

.block_11.omega .tiny-list {
background : url('http://techpounce.com/wp-content/uploads/2012/07/Appl-BG.png') !important;
}

.block_11 .tiny-list {
background : url('http://techpounce.com/wp-content/uploads/2012/07/Win-BG.png') !important;
}
    Thread Starter gnruble

    (@gnruble)

    11 years, 9 months ago

    Thanks! 😀

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Styling PHP-generated Content?’ is closed to new replies.