Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #25635


    I just like to post some of my CSS hacks so others may use it with their own colors and formats. Have a look at the comments and try it for yourself.

    /* This is some style specific stuff you may not need to include */

    h1, h2, h3, h4, h5, h6, .widgettitle {font-weight:500; text-shadow: rgba(0,0,0,0.4) 1px 1px 2px; font-family:"Oswald",Helvetica,Arial,sans;}

    .title_container .main-title {text-transform:uppercase; font-size:24px; font-family:"Oswald",Helvetica,Arial,sans;}

    title, #top .alternate_color.title_container .main-title a {text-shadow: rgba(0,0,0,0.2) 1px 1px 2px;}

    #footer h3.widgettitle {color:#e1e1e1;}

    .avia_textblock h1 { margin-bottom:0px; text-shadow: 3px 3px 3px #000;}

    /*#footer {background: none transparent}*/

    #top .widget ul.children {margin-left:15px;}

    .main_menu {font-family: Oswald, Helvetica, Arial;}

    .main_menu ul:first-child > li > a {font-weight:400;}

    .sort_by_cat a {border:#ad137f 1px solid; color:#fff; padding:0px 5px 0px 5px;}

    .breadcrumb-title {display:none !important;}

    .main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child > li.current_page_item > a {font-weight: 400;}

    .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {color: #ad137f;}

    .main_color .sidebar .current_page_item>a {color:#ad137f; font-weight:bold;}

    .current_page_item>a {font-weight:400;}

    /* Remove tranparency from header */

    #header {background-color:#fff;}

    /* HR Fullwidth remove margins */

    .hr-full, .hr-big {margin: 20px 0;}

    /* Making images more fancy (box and slight shadow) - CSS class 'framed' must be added manually to IMAGE */

    img.framed {background: #f5f5f5; border: 1px solid #fff; outline: 1px solid #eaeaea; box-shadow: 0px 2px 2px rgba(0,0,0,0.6);}

    body .alignleft, .entry-content a:link .alignleft, body .alignright, .entry-content a:link .alignright {padding: 4px !important;}

    /* Displaying the line below main nav element when current page is level 3+ */

    .current-page-ancestor a > .avia-menu-fx {visibility: visible;opacity: 1;}

    .current-page-ancestor a > .avia-menu-fx .avia-arrow-wrap {overflow: hidden;display: block;}

    /* Bold should be CI color */

    .main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong {color:#ad137f;}

    /* Center Title of Portfolio Item */

    .main_color .grid-entry-title {text-align:center;}

    /* Rework the menu shading (just a quite bit) */

    #header .avia_mega_div {-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);}

    .main_menu .menu ul {-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);}

    .responsive #top.boxed .stretch_full {background:#f3f3f3;}

    /* Fixing border radius of rounded images */

    .avia-post-nav .entry-image img {border-radius: 4px;}

    /* Modifiying Post-Nav background color (those nifty flyout-arrows left and right on news and portfolio) */

    #top .avia-post-nav:hover {background: #ad137f; background: rgba(160,1,126,0.8);}

    #top .avia-post-nav {background: #aaa; background: rgba(160,1,126,0.4);}

    /* Remove rounded stuff (in case you prefer some qubic stuff) */

    .avia-icon-list .iconlist_icon, .avia-testimonial-image, .avia-testimonial-image img, .iconbox_top .iconbox_icon {border-radius:4px;}

    /* Removing the breadcrumb (no one need a breadcrumb on this) */

    .title_container .breadcrumb {display:none;}

    /* Menu Mods */

    .header_color .main_menu ul:first-child > > a {color:#ad137f;}

    /* Megamenu Mods */

    #top #header .mega_menu_title a {font-size:15px; border-bottom: #ccc 1px dotted;}

    #top #header .mega_menu_title a:hover {text-decoration:none;}

    #header .avia_mega_div .units {border:none;}

    /* Tagcloud Links */

    .tagcloud a {background:rgba(250,250,250,0.4);}

    .tagcloud a:hover {background:rgba(250,250,250,0.8); text-decoration:none;}

    /* Tagcloud widget (I'm a lousy guy writing tags lowercase) */

    .widget_most_popular_tags {text-transform: capitalize;}

    /* Tabs (bold, font size, better to read) */

    .js_active .tab {font-size:12px !important;}

    .main_color .tabcontainer .tab_titles .tab {font-weight:bold;}

    .main_color .sidebar_tab, .main_color .tabcontainer .tab:hover {color: #ad137f;}

    /* Tables (what a mess) */

    .main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even) {color: #666;}

    .main_color tr:nth-child(odd), .main_color .pricing-table>li:nth-child(odd), .main_color .pricing-extra {color: #666;}

    .main_color tr:hover {background:#ad137f; color:#fff;}

    /* Form Elements (stretching to 100%, responsible) */

    #top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {width:100%;}

    /* Ajax Contact Form (I'll leave this - plugin specific. Don't use it anymore) */

    button.ajax-submit {margin:0;border: #ad137f 1px solid; background: #ad137f; color: #fff; padding: 10px; font-weight: bold;}

    button.ajax-submit:hover {cursor:pointer;}

    form.iwacontact span.ajax-feedback.error, form.iwacontact span.ajax-result.error {color:#ad137f;}

    /* Sortable links (links are fine, but I prefer more of a button style) */

    .main_color #js_sort_items a.active_sort, .main_color #js_sort_items a {color:#666;}

    .main_color #js_sort_items a.active_sort {background:#ad137f; color:#fff; border:#ad137f 1px solid;}

    .main_color #js_sort_items a:hover {background:#ad137f; color:#fff;}

    .sort_by_cat a {border: #ccc 1px solid; padding: 3px 10px 3px 10px; background: #e8e8e8; border-radius:2px; margin-right:10px;}

    #js_sort_items .text-sep {display:none;}

    /* Widget News remove date/time (don't do this if you care about SEO) */

    .news-time {display:none;}

    .news-headline {margin-top:4px;}

    /* Ajax Search results (didn't like the excerpt stuff and some other slight optimizations) */

    .header_color .ajax_search_title {color: #666; line-height: 1.4em; height: 20px; margin-top: 3px; font-size: 14px; }

    .ajax_search_response h4:first-child, .ajax_search_response h4 {font-size: 18px; text-transform:uppercase;}

    .header_color .ajax_search_excerpt {display:none;}

    #top div .ajax_search_entry_view_all {font-weight: normal; text-transform: uppercase;}

    .ajax_search_image {border-radius:2px;}

    /* Search results (doh!) */

    .main_color .search-result-counter {background:#ad137f;}

    .search-result-counter {box-shadow:none; border-radius:2px; color:#fff; font-weight:bold;}

    .post-meta-infos {display:none;}

    .template-search .entry-content .post-title {font-size:18px; margin:0; padding-top:10px;}

    .responsive .boxed#top {-moz-box-shadow: 0 0 25px #000; -webkit-box-shadow: 0 0 25px #000; box-shadow: 0 0 25px #000;}

    /* Remove dashed line from post overviews (News, Archives - should be fixed by Kriesi) */

    .multi-big .post_author_timeline, .single-small .post_author_timeline {border-right-width: 0px;}

    /* Adding a slight shadow to the small preview pics used in post overviews (still need x-browser stuff) */

    .small-preview {box-shadow: 0 0 6px rgba(0,0,0,0.4);}

    /* Form Elements (Contact Form 7) */

    span.wpcf7-list-item {margin-left: 0; margin-right:10px;}

    #top .footer_color input[type='email'] {border-color: #666; background-color: #333; color: #aaa;}

    span.wpcf7-not-valid-tip {top: -52px; left: 1px; background: #ad137f; border: 1px solid #ad137f; padding: 4px; color: #fff;}

    div.wpcf7-validation-errors {border: 1px solid #ad137f !important; background: #ad137f; color: #fff; text-align: center; font-weight: 600; padding: 4px;}

    div.wpcf7-response-output {margin: 2em 0em 1em;}

    /* Iconbox mouseover effect and changing the link behaviour (this is needed if you like to have the whole iconbox linked) */

    .main_color.iconbox_top .iconbox_content:hover {background: #efefef;}

    #top .iconbox_top a {text-decoration: none;color: inherit;}

    /* Changing image overlays from circle to rounded square (there ya go) */

    .image-overlay .image-overlay-inside::before {border-radius: 4px;}

    /* 3D tag cloud with mug (in case you use this canvas-plugin try the coffee version) */

    #myCanvasContainer {background: transparent url('') no-repeat top left;}


    Great stuff Formateins,

    I just posted a topic to the forum suggesting that there is A-Z of useful tweaks as I know allot of the forum repeats itself with the same questions and its often impossible to sift through the volumes of repetition and odd subject headings to find exactly what im looking for. This list of stuff added by you is great – im gonna take it and play around with the tweaks you’ve added myself.




    Theme authors should provide a full documentation on their CSS code – this would save plenty of support threads… :D Glad you like it. There are still some things to be optimized (box-shadow, text-shadow) which I currently left out… undergoing dev…



    Thanks formateins for posting your code :)




    Great, thanks for that. More like that is aways welcome. ;)



    This is awesome. Thanks @formateins. :)




    thanks a lot, there are very helpful things :-)



    Thanks Formateins :)



Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom CSS for your pleasure’ is closed to new replies.