WordPress.org

Forums

Customizr
Tweaking slider text (6 posts)

  1. Mouais5
    Member
    Posted 1 year ago #

    Hi everyone.

    I'm quite new at css editing and i'm trying to figure out a couple of things.
    - I'd like to edit the "Call for action" button on the slider. and cant make it. Here are the base code lines I identified :

    .btn-primary {
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #c30606;
    background-image: -moz-linear-gradient(top, #e10707, #970505);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e10707), to(#970505));
    background-image: -webkit-linear-gradient(top, #e10707, #970505);
    background-image: -o-linear-gradient(top, #e10707, #970505);
    background-image: linear-gradient(to bottom, #e10707, #970505);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe10707' , endColorstr='#ff970505' , GradientType=0);
    border-color: #970505 #970505 #4d0202;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #970505;
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */

    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
    color: white;
    background-color: #970505;
    *background-color: #7e0404;
    }
    .btn-primary:active,
    .btn-primary.active {
    background-color: #650303 \9;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
    color: white;
    background-color: #970505;
    *background-color: #7e0404;
    }
    .btn-primary:active,
    .btn-primary.active {
    background-color: #650303 \9;
    }

    I'd like this button to look more like the "Read More" button here : http://demo.fabthemes.com/revera/
    - I'd also like to know where to find css code to tweak "next" and "previous" button on the slider...

    - I'm also looking to get thinner lines and to control their colors on top and below the header.

    Thx a lot for your help!
    btw : here is my ongoing project : http://collectif-fil.fr/

  2. rdellconsulting
    Member
    Posted 1 year ago #

    1) The code you need from that site is:

    .carousel-caption .btn {
      background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
      border: 1px solid #fff;
      color: #fff !important;
      display: block;
      font-weight: bold;
      margin: 10px auto;
      padding: 5px 0;
      text-transform: uppercase;
      width: 150px;
    }

    Remove the code you added above to get back to the default code.
    You'll also need to consider the hover state which that button doesn't seem to bother with.

    2) This snippet hides those controls. Use the same selector and replace display:none; with valid css

    3) Top border is a setting in Customize>Skin (Display top border) or tweak css below
    Bottom border can be changed with:

    .tc-header {
      border-bottom: 10px solid #e9eaee;
      border-top: 5px solid #9db668;
    }
  3. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi @mouais5,
    I can see you have already done some neat customizations to your website, looks nice!

    Your issues are all about CSS. If you are not very familiar with this language, and the specificity and inheritance concepts in particular, you might want to read this quick guide on CSS basics to be quickly setup.

    Now, here's what I would do :
    1) Inspect the webpage with your favorite browser tool, then find the most appropriate CSS selector to modify.
    2) Write your custom CSS code in the style.css of your child theme. (see how to customize the Customzr theme here if needed).

    This should not be that hard looking at what you have already accomplished!

  4. Mouais5
    Member
    Posted 1 year ago #

    Thanks a bunch for your help.

    What i found quite difficult is to identify the nam of the object i'd like to work on.

    For instance I'd like to modify the dark part showing under the text on the sliders. I dont know its "name"... same goes for the container of the "call for action" button I just changed (and that I would like to align left instead of centering it...)

    I did try dev tools for Chrome (am using this browser but didnt really understand...)

    EDIT : damn i just installed CSS Viewer and that's gonna help me so much^^ I would recommend it. I just answered my first question in about half a second using it :P

  5. rdellconsulting
    Member
    Posted 1 year ago #

    Also check out the CSS Glossary

  6. ElectricFeet
    Member
    Posted 1 year ago #

    And watch a video on Firebug (6 minutes; link here: http://www.themesandco.com/snippet/firebug-best-spent-6-minutes/ ) which will help you get comfortable with developer tools.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic