Article Page- Article Category based styling

Home Forums KLEO Article Page- Article Category based styling

This topic has 11 replies, 2 voices, and was last updated 9 years by Radu.

  • Author

    Tagged: , , , , , , , ,

  • May 20, 2015 at 06:15 #59524
     clarksvilleoutloud
    Participant

    I’ve changed the styling for the home page from that little vertical bar for the post types to the entire header a unique color per category. Problem is, i’d like this styling process for the article itself.

    I’d like the meta data “square” bg to have the unique category color, and the article body to have a border of the same color.

    Also, on this page I cannot get the fonts to change properly. they remain this darker smokey gray color that is just too hard to see.

    I’ve attached a picture of the blog page and how it is color coded by category in the post header and also a pic of the post page and where my desired editing would take place.

    thanks in advance.

    Attachments:
    You must be logged in to view attached files.
    May 20, 2015 at 12:34 #59561
     clarksvilleoutloud
    Participant
    This reply has been set as private.
    May 20, 2015 at 12:36 #59563
     clarksvilleoutloud
    Participant
    This reply has been set as private.
    May 20, 2015 at 19:27 #59618
     Radu
    Moderator

    Hello,

    Provide correct credentials, to see your site.

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    May 20, 2015 at 21:15 #59633
     clarksvilleoutloud
    Participant
    This reply has been set as private.
    May 21, 2015 at 20:55 #59775
     Radu
    Moderator

    Hello,

    I’ve applied this css to kleo-child/style.css

    COPY CODE
    

.main-color hr, .main-color.container-wrap, .main-color#footer, .main-color#socket, .main-color.social-header, .main-color .top-menu .tabdrop:before, .main-color #top-social .tabdrop:before, .main-color #top-social, .main-color .top-menu > ul, .main-color .kleo-main-header, .main-color .template-page, .main-color .sidebar-right, .main-color .sidebar-left, .main-color .sidebar-extra, .main-color .sidebar-main, .main-color .hr-title, .main-color .nav-tabs, .main-color .nav-pills > li > a, .main-color .kleo-tabs .nav .open > a.dropdown-toggle, .main-color .kleo-tabs .nav .open > a.dropdown-toggle:hover, .main-color .kleo-tabs .nav .open > a.dropdown-toggle:focus, .main-color .kleo-tabs .tabdrop .dropdown-menu, .main-color .dropdown-menu, .main-color .kleo-toggle-menu .kleo-toggle-submenu:before, .main-color #ajax_search_container:before, .main-color #top-social li a, .main-color .top-menu li > a, .main-color .pagination > li > a, .main-color .pagination > li > span, .main-color .callout-blockquote blockquote, .main-color .masonry-listing .post-content, .main-color .list-divider li, .main-color #ajax_search_container, .main-color .form-control, .main-color .feature-item:hover .feature-icon, .main-color .bordered-icons .feature-item.default-icons-size .feature-icon, .main-color .bordered-icons .feature-item.big-icons-size .feature-icon, .main-color input[type="text"], .main-color input[type="password"], .main-color input[type="date"], .main-color input[type="datetime"], .main-color input[type="datetime-local"], .main-color input[type="month"], .main-color input[type="week"], .main-color input[type="email"], .main-color input[type="number"], .main-color input[type="search"], .main-color input[type="tel"], .main-color input[type="time"], .main-color input[type="url"], .main-color textarea, .main-color .activity-timeline, .main-color #buddypress div.item-list-tabs ul li a span, .main-color #buddypress button, .buddypress .main-color a.button, .main-color #buddypress a.button, .main-color #buddypress input[type=submit], .main-color #buddypress input[type=button], .main-color #buddypress input[type=reset], .main-color #buddypress ul.button-nav li a, .main-color #buddypress div.generic-button a, .main-color.bp-full-width-profile div.generic-button a, .main-color #buddypress .comment-reply-link, .main-color #buddypress #whats-new, .main-color #buddypress div.message-search, .main-color #buddypress div.dir-search, .main-color #buddypress .activity-read-more, .main-color #bp-login-widget-submit, .main-color .bbp_widget_login .button.user-submit, .main-color #wp-calendar caption, .main-color .wp-caption, .main-color .widget form#bbp-search-form > div, .main-color .widget_search #searchform > div, .main-color #bp-login-widget-form input[type="text"], .main-color #bp-login-widget-form input[type="password"], .main-color .bbp-login-form input[type="text"], .main-color #buddypress #friend-list .friend-inner-list, .main-color #buddypress #member-list .member-inner-list, .main-color #buddypress #members-list .member-inner-list, .main-color #buddypress #groups-list .group-inner-list, .main-color #buddypress div#item-nav .tabdrop .dropdown-menu, .main-color #buddypress div.profile, .main-color #buddypress #friend-list div.action .generic-button a.send-message, .main-color #buddypress #member-list div.action .generic-button a.send-message, .main-color #buddypress #members-list div.action .generic-button a.send-message, .main-color #buddypress form.standard-form .left-menu img.avatar, .main-color .checkbox-mark, .main-color #buddypress div#group-create-tabs ul li.current a, .main-color .rtmedia-container #rtMedia-queue-list tr td, .main-color #buddypress .standard-form textarea, .main-color #buddypress .standard-form input[type=text], .main-color #buddypress .standard-form input[type=color], .main-color #buddypress .standard-form input[type=date], .main-color #buddypress .standard-form input[type=datetime], .main-color #buddypress .standard-form input[type=datetime-local], .main-color #buddypress .standard-form input[type=email], .main-color #buddypress .standard-form input[type=month], .main-color #buddypress .standard-form input[type=number], .main-color #buddypress .standard-form input[type=range], .main-color #buddypress .standard-form input[type=search], .main-color #buddypress .standard-form input[type=tel], .main-color #buddypress .standard-form input[type=time], .main-color #buddypress .standard-form input[type=url], .main-color #buddypress .standard-form input[type=week], .main-color #buddypress .standard-form select, .main-color #buddypress .standard-form input[type=password], .main-color #buddypress .dir-search input[type=search], .main-color #buddypress .dir-search input[type=text], .main-color .bbp-pagination-links a, .main-color .bbp-pagination-links span, .main-color #bbpress-forums li.bbp-body ul.forum, .main-color #bbpress-forums li.bbp-body ul.topic, .main-color form#new-post, .main-color #bbpress-forums .bbp-form input[type="text"], .main-color .quicktags-toolbar, .main-color .wp_themeSkin tr.mceFirst td.mceToolbar, .main-color .quicktags-toolbar input, .main-color .wp-editor-area, .main-color .rtmedia-container .rtmedia_next_prev a, .main-color .rtmedia-activity-container .rtmedia_next_prev a, .main-color #buddypress div.rtmedia-activity-container .rtmedia_next_prev a, .main-color #rtm-gallery-title-container #rtm-media-options, .main-color #rtMedia-upload-button, .main-color #buddypress #item-body .rtmedia-item-comments .rt_media_comment_form textarea, .main-color .rtmedia-container .rtmedia-editor-main dl.tabs dd > a, .main-color .rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .main-color #buddypress div.rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .main-color .rtmedia-container .imgedit-wrap div.imgedit-settings .imgedit-group, .main-color #buddypress .rtmedia-container textarea, .main-color #buddypress .rtmedia-container input[type=text], .main-color #buddypress .rtmedia-container input[type=text], .main-color #buddypress .rtmedia-container input[type=color], .main-color #buddypress .rtmedia-container input[type=date], .main-color #buddypress .rtmedia-container input[type=datetime], .main-color #buddypress .rtmedia-container input[type=datetime-local], .main-color #buddypress .rtmedia-container input[type=email], .main-color #buddypress .rtmedia-container input[type=month], .main-color #buddypress .rtmedia-container input[type=number], .main-color #buddypress .rtmedia-container input[type=range], .main-color #buddypress .rtmedia-container input[type=search], .main-color #buddypress .rtmedia-container input[type=tel], .main-color #buddypress .rtmedia-container input[type=time], .main-color #buddypress .rtmedia-container input[type=url], .main-color #buddypress .rtmedia-container input[type=week], .main-color #buddypress .rtmedia-container select, .main-color #buddypress .rtmedia-container input[type=password], .main-color .kleo-toggle-menu .kleo-toggle-submenu, .main-color .kleo-toggle-menu a.remove, .main-color .woocommerce .kleo-cart-totals .totals-wrap, .main-color .kleo-toggle-menu .minicart-buttons .btn-default, .main-color .kleo_ajax_results h4, .main-color .ajax_view_all, .main-color #articles-dir-list article.article-container {
color:#efefef;
}

body.single .wrap-content article.hentry {border:1px solid #555;}
body.single article .article-meta.hentry {border-right:1px solid #555;width:110px;padding: 0 10px}

.post-footer small a span {color:#FFFFFF;}

.item-likes.liked:before, .item-likes:hover:before {color:#EEEEEE;}

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    May 22, 2015 at 02:38 #59787
     clarksvilleoutloud
    Participant

    The link color change and borders worked perfectly.

    I’m curious though, after the addition of this new css, their is a new random tab added to the profile page, on the way left. It has been there before, but I had some code to rid it from the page.

    Also, as you can see in the settings tab of the profile page, The input fields are still the same color as my background. I’d like to remedy that. Either a white border or a different color inside.

    Lastly, that button on the right side of the cover photo area is still almost unreadable.

    May 22, 2015 at 05:29 #59794
     clarksvilleoutloud
    Participant

    Well I’ve added some css to the child and was was able to fix that tab issue. …still can’t get the colors for theinput fields and cover link.

    May 22, 2015 at 17:08 #59829
     Radu
    Moderator

    Have you resolved that ?

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    May 23, 2015 at 01:24 #59863
     clarksvilleoutloud
    Participant

    The borders are there exactly where I’d like them. I’d like to color in that meta area and change the border colors per article’s category.

    I have worked the blog page to have a different color header automatically per category with this

    COPY CODE
    .masonry-listing .category-reviews .post-header {
 background-color: #ECA73B!important;
}

.masonry-listing .category-clarksvillians .post-header {
 background-color: #0075B0 !important;
}

.masonry-listing .category-events .post-header {
 background-color: #0C595B !important;
}

.masonry-listing .category-opinions .post-header {
 background-color: #34308C !important;
}

.masonry-listing .category-news .post-header {
 background-color: #CC2E26 !important;
}

.masonry-listing .category-uncategorized .post-header {
 background-color: #333333 !important;

    I’d like something where the display of the articles border and meta bg are based off category.

    May 23, 2015 at 04:03 #59870
     clarksvilleoutloud
    Participant

    Ok, so after looking on another sized device. I noticed that the border around the article drops the body.

    in the second attachment is the desired output, minus border issues mentioned above.

    Attachments:
    You must be logged in to view attached files.
    May 25, 2015 at 16:51 #60061
     Radu
    Moderator

    Test with this, it should to be ok.

    COPY CODE
    
@media screen and (max-width: 767px) {

article.hentry {padding-bottom:1px}

article .article-meta, .single-attachment .entry-header {
  width: 100%;
  float: left;
  margin-right: 20px !important;
  text-align: left;
  padding-bottom: 10px !important;
  height: auto !important;
}

.single .container .with-meta .article-content {
  padding:0 10px !important;
}

}
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)

The forum ‘KLEO’ is closed to new topics and replies.

Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.
wp-theme-installation-service

©2024 SeventhQueen - Powered by KLEO Theme

Terms & conditions | Privacy Policy

Log in with your credentials

Forgot your details?