• Resolved cbrix84

    (@cbrix84)


    Hi,
    I used a CSS I found in a comment in here to change my bottoms. However, now my “Kontakt” link/bottom in my slider has moved in so that it is no longer in line with the text.
    Could anyone help me?
    Also, when activating the search function in my footer, the bottom are completely different from the rest. I would like all the bottoms on my site to be “flat”.
    website: christinebrix.dk
    CSS:
    .btn-primary {
    color: #5a5a5a;
    text-shadow: none;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#7F516764′,endColorstr=’#7F516764′);
    border-color: transparent;
    /* Darken IE7 buttons by default so they stand out more given they won’t have borders */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: none;
    border-bottom-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-style: none;
    border-width: 0;
    font-size: 18px;
    line-height: 100%;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
    color: #777777;
    background-color: transparent;
    text-decoration: none;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
    text-decoration: none;
    }

    .btn.active, .btn:active {
    box-shadow: none;
    }

    .row-fluid .tc-grid {
    box-shadow: none;
    }

    Thanks in advance ??

Viewing 15 replies - 1 through 15 (of 16 total)
  • .carousel-caption .btn {
        margin-top: 10px;
        margin-left: -3%; /* Adjust */
    }

    If you want to be pixel-perfect, the % is somewhere between 2-3%

    Search, try:

    #s {
        margin-top: 10px;
    }
    Thread Starter cbrix84

    (@cbrix84)

    Thanks so much, it helped moving my “kontakt” link, however, the search bottom is still not the same “flat” style as the other links… can you help me with that one? ??

    Not sure which links you mean? Can you give me an example?

    Thread Starter cbrix84

    (@cbrix84)

    The “kontakt” and “l?s mere” links on the front page used to be bottoms that looked like the “s?g” / “search” bottom in the footer. However, I used the CSS to change the look of the bottoms into a more “flat” look.

    The “s?g” / “search” bottom hasn’t changed though, which I dont understand. I would like all the bottoms to have the same “flat” look.

    Thanks once again ??

    Lost in Translation issue I think. You mean buttons, not bottoms? ??

    You have a complex definition of .btn-primary:

    .btn-primary {
    color: #5a5a5a;
    text-shadow: none;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7F516764',endColorstr='#7F516764');
    border-color: transparent;
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: none;
    border-bottom-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-style: none;
    border-width: 0;
    font-size: 18px;
    line-height: 100%;
    }

    So now try adding input[type=”submit”] which is a different kind of button:
    .btn-primary, input[type="submit"] {.....}

    Thread Starter cbrix84

    (@cbrix84)

    haha, sorry… I always mess up bottom and button (I’m Danish) ??
    should I just copy paste your CSS (in the grey box you wrote above) underneath the one I have now?

    Simpler to just add , input[type="submit"] to the .btn-primary css

    Thread Starter cbrix84

    (@cbrix84)

    Now the “search” button disappeared completely ??

    Sorry, take out that last change. OK, next step:

    input[type="submit"] {
      background-color: transparent;
      background-image: none;
      background-repeat: no-repeat;
      border: medium none;
      box-shadow: none;
      cursor: pointer;
      display: inline-block;
      float: right;
      font-size: 18px;
      line-height: 20px;
      margin-bottom: 0;
      text-shadow: none;
    }

    Will keep iterating until we get it right. Tell me what’s wrong with this latest.

    Thread Starter cbrix84

    (@cbrix84)

    aargh, that just made all the buttons like the “search” button so deleted that part again…

    I like your perseverance ??

    Should look like this

    You need help outside the Forum. Do you know anyone, or try to find me. Forum Rules prevent me from publishing any contact details.

    Thread Starter cbrix84

    (@cbrix84)

    Wait, I moved the CSS around and it worked, the “search” button is now “flat” ?? HOWEVER, it also made all the other buttons move to the left ??
    The CSS now looks like this:
    .btn-primary
    {
    color: #5a5a5a;
    text-shadow: none;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#7F516764′,endColorstr=’#7F516764′);
    border-color: transparent;
    /* Darken IE7 buttons by default so they stand out more given they won’t have borders */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: none;
    border-bottom-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-style: none;
    border-width: 0;
    font-size: 18px;
    line-height: 100%;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
    color: #777777;
    background-color: transparent;
    text-decoration: none;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
    text-decoration: none;
    }

    .btn.active, .btn:active {
    box-shadow: none;
    }

    .row-fluid .tc-grid {
    box-shadow: none;
    }
    .carousel-caption .btn {
    margin-top: 10px;
    margin-left: -2.4%; /* Adjust */
    color: #ffffff;
    font-size: 22px;
    text-decoration: underline;
    }
    .btn-primary, input[type=”submit”] {
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    border: medium none;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 0;
    text-shadow: none;
    }

    .btn-primary, input[type="submit"] {
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    border: medium none;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 0;
    text-shadow: none;
    }
    input[type="submit"] {
    float: right;
    }
    Thread Starter cbrix84

    (@cbrix84)

    YAAAY, it finally worked! Halleluja ??

    Thank you so much @rdellconsulting!

    Great. Can you mark as [resolved] in rhs sidebar please.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Bottom not in line’ is closed to new replies.