New to the community? Start here

Hyrarchic postpart selectors in custom css.

Hello,

although there selectors available to customize the different parts of the posts, I still need to go to the browser inspector to find out the hyrarchy. An example of what I mean is:

this:

.uposts-object li {

border: 1px solid black;

height: 200px;

width: 800px;

}

.uposts-object li .content {

margin-left: 20px;

}

.uposts-object li .thumbnail {

border: 1px solid black;

height: 200px;

width: 200px;

float: left;

padding-top: 0px;

}

AND This:

.upfront-output-posts > ul li, .upfront_posts-list > ul li, .upfront_posts-single > ul li, li.uf-post {

padding: 0 !important;

}

.uposts-part.thumbnail img {

margin-top: 0 !important;

}

I know the actual class is shown in the “edit html” option, but might as well be shown as selector as the css selctors are

ul and

li in this case…

Thanks

Frenk

Thu, 14 Dec 2017 12:03:56
  • Nastia
    • Ex Staff

    Hello Frenk

    Hope you’re doing well!

    Would you please elaborate and let us know more information about the issue?

    When adding CSS code from the CSS pop the CSS hierarchy, if required is added automatically. Upfront allows to add CSS class to each element separately by creating Preset, in this case, a hierarchy may not be needed, because the CSS is applied directly to element’s preset.

    Please advise,

    Kind regards,

    Nastia

  • Frenk
    • Flash Drive

    I want to style the posts so that they appear the same way in list or single in upfront builder. The featured image and the content overlap, when I add a float left to the featured image. If I add an image to the content of the post itself in wp-admin, i can arrange the output, but I want it to be a preset in upfront builder , so however they write their post with image content, it will appear the same as output in a builder theme. The wysisig editor in the wp posts allows it, but needs to be styled 1 by one.

    I tried to use contentselector and after that img {

    float: left; but nothing happens actually

    thanks, Frenk

  • Dimitris Kalliris
    • Support Team Lead

    Hello there Frenk,

    hope you're doing good today! :slight_smile:

    In order to achieve this, you should have something like this, in the Preset CSS of the Post Content element in single posts.

    .content img {
    
float: left !important;
    
}

    in order to override any inline styles that got inserted from the editor. Here's a screenshot from a local test site of mine.

    [attachments are only viewable by logged-in members]

    As for getting the same display for both archives and single posts, you should edit their corresponding preset CSS, as archives are using the Posts element

    [attachments are only viewable by logged-in members]

    while single posts are having separate post data elements for each part (title, author, date, thumbnail image etc). Below is an example of a thumbnails post data element in the single post layout.

    [attachments are only viewable by logged-in members]

    Hope that was some help! Let us know, if further assistance is required here!

    Warm regards,

    Dimitris