0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

Custom CSS for Widget Kraken Theme Wordpress

Last Post
Search Topic

  • Custom CSS for Widget Kraken Theme Wordpress

    Posted 8 years 6 months ago
    • Hi Guys
      Im having a bit of a problem with overiding the Kraken themes css.
      My situation is, I have a widget within my header, (Theme My Login). I have adjusted that code to my specifics. Now my problem comes up when I have to insert the CSS/bootstrap for the login widget (Theme My Login).

      I have followed previous topics advise on creating the scss folder and within it the custom.scss file and added my css code.
      And nothing seems to work. It keeps using the themes current css for the widget styling.

      Any advice would be greatly appreciated

      my css code:
      .login-form {
      background-color: #eff2f3;
      padding: 24px 23px 20px;
      position: relative;
      border-radius: 6px;
      float:left;
      width:100%;
      }

      .login-form .login-field-icon {
      color: #bfc9ca;
      font-size: 22px;
      position: absolute;
      right: 10px;
      top: 12px;
      -webkit-transition: 0.25s;
      transition: 0.25s;
      }

      .login-form .control-group {
      margin-bottom: 6px;
      position: relative;
      }

      .login-form .login-field {
      border-color: transparent;
      font-size: 17px;
      text-indent: 3px;
      position: relative;
      float: left;
      }

      .loginform .login-field:focus, .login-form .login-field:focus {
      border-color: #1abc9c;
      }

      .fui-user:before {
      -webkit-font-smoothing: antialiased;
      content: "\f007";
      font-family: 'fontawesome';
      }

      .fui-password:before {
      -webkit-font-smoothing: antialiased;
      content: "\f084";
      font-family: 'fontawesome';
      }

      .login-form .login-field:focus + .login-field-icon {
      color: #1abc9c;
      }

      .login-form .login-field-icon {
      color: #bfc9ca;
      font-size: 22px;
      position: absolute;
      right: 10px;
      top: 12px;
      -webkit-transition: 0.25s;
      transition: 0.25s;
      }

      .full-width {
      width: 100%;
      }

      Regards
    #1324994
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22324
    • Thanks: 3230
    • messin' with stuff

    Re: Custom CSS for Widget Kraken Theme Wordpress

    Posted 8 years 6 months ago
    • Post a link to your page

      Make sure you hit Recompile SCSS on the Styles tab after making changes to your custom.scss file
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1325124

  • Re: Custom CSS for Widget Kraken Theme Wordpress

    Posted 8 years 6 months ago
    • wordpress.fishtube.co.za
    #1325160
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22324
    • Thanks: 3230
    • messin' with stuff

    Re: Custom CSS for Widget Kraken Theme Wordpress

    Posted 8 years 6 months ago
    • There's lots of different reasons here... and we it's really beyond the scope of support to help custom style 3rd party components, plugins, or extensions... you ultimately need to come up with the custom code yourself or ask the plugin developer for assistance

      .login-form {
      background-color: #eff2f3;
      padding: 24px 23px 20px;
      position: relative;
      border-radius: 6px;
      float:left;
      width:100%;
      }

      ^^ that is not specific enough... google "css specificity" for guidance on that topic... but all the styling you're trying to override is currently being set inline... so you'll have to use !important to override there...

      for some of the other stuff... I'm not sure what you're targetting with .fui-password, .fui-user, or .login-field-icon --- I dont see those classes loading anywhere on the page...
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1325191

Time to create page: 0.105 seconds