Return to previous page

Header Top Bar – Customization - by khoavo

This topic has 19 replies, 3 voices, and was last updated 10 years, 4 months ago ago by Eva Kemp

  • Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 08:12

    Hi there, I’m using Header #10. For my Header Top Bar customization, could you please share the codes you used on your E-COMMERCE/DEFAULT Preview? So I can replace the Language Switcher and replace it with the icons and forms,etc., just like from your Preview (Twitter, Facebook, Pinterest, Newsletter, Sign In, Register).

    Thanks!

    #54797 Copied Theme version: 1.7.1 WooCommerce version: 2.3.7
    18 Answers
    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 6, 2015 at 08:43

    Please navigate appearance->widgets. Then create text widget with [share] shortcode and put it into the “place in the header top bar”.

    With best regards
    Brian Johnson

    #54805 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 17:27

    Hi, those are shared social icons. I want the social icons to be external links to the social media pages, where it opens in a new window when clicked.

    And if I do use these as shared, how can I customize which icons to display for sharing? Twitter, FB, Pinterest, G+ and Mail seems to be your default display.

    Let me know. Thanks for your customer support.

    #55021 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 6, 2015 at 19:20

    Hello,

    You need edit the file wp-content/themes/royal/framework/shortcodes.php (line 1729-1761). Remove the code of the icons that you don’t want to display and you can edit links there.

    Thank you.
    Regards,
    Eva Kemp.

    #55046 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 19:28

    Hi, thanks for the quick response on this topic.

    On a different note, for the Revolution Slider / Left & Right Navigation arrows, what’s the CSS to change the default color from Light to Dark colors? Since my Slide Background are in white color. The default Light arrows don’t show as well, I need a darker color.

    And for the Background image source for each slide, I noticed when I select the COVER for Background Fit, my image gets a little bit blurred and not as sharp as its original resolution. Is that normal? I want my image to auto fit the slider grid and remain auto responsive. Thanks.

    #55049 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 6, 2015 at 19:52

    Hello,

    1. Please add this code in custom.css file:

    .rev_slider_wrapper .tparrows::before {
   color: black !important;
}

    How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

    2. Try to upload high resolution images for your slides.

    Thank you.
    Regards,
    Eva Kemp.

    #55056 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 20:10

    Hi, I’m sorry, I meant the navigation circle color fill, it’s currently white. I think it’s a Sprite Image huh? The “arrow” is already in black color, so your Custom CSS Code does nothing to change the circle color fill.

    And also when I select the Preview 1, 2, 3 or 4 for the Navigation Style of the Rev. Slider, I noticed the default arrow and circle remains underneath it, so it kinda overlaps the Preview 1, 2, 3 & 4 arrow image. Odd.

    #55062 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 6, 2015 at 20:39

    Hello,

    Please use this code:

    .rev_slider_wrapper .tparrows:hover {
 background-color: black;
}

    If this code doesn’t work please provide us with a link to your site.

    Thank you.
    Regards,
    Eva Kemp.

    #55071 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 20:51

    Unfortunately, the new CSS code didn’t work either. I’ve provided the link to my test site in the private content field. Currently, there are 4 Slides. 1 – 3 have white background. I left the 4th one in color so you can see the circle hover color, in which I need to be dark.

    Please, contact administrator
    for this information.
    #55078 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 6, 2015 at 20:54

    Hello,

    Please try this code instead:

    .rev_slider_wrapper .tparrows:hover {
  background-color: black !important;
}

    Regards,
    Eva Kemp.

    #55079 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 21:04

    Negative, didn’t work. Go to the 4th Slide. First mouse hover over the image, you’ll see the Circle and Arrow in White color outline (no fill). Then when you place the mouse cursor over that Circle & Arrow, your new code converts it into Black Color, but then the “arrow” color would need to be in white.

    #55082 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 6, 2015 at 21:34

    Hello,

    Do you want background color of the arrows to be always black and some other color when on hover?
    Please describe what you’d like to achieve step by step and provide us with wp-admin panel credentials.

    Thank you.
    Regards,
    Eva Kemp.

    #55087 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 6, 2015 at 21:47

    First Mouse Hover the image area, I want the Circle & Arrow to appear Black or allow me to insert a color value in case I want it to match my header color.

    Then when the mouse hovers over the Circle & Arrow, I want the Circle to fill with a Solid Black Color with the Arrow in White Color. Or a Semi-transparent Circle Fill is fine too, it would me it more stylish.

    Also, if you go into the Rev. Slider Setting & elect my main Home Slider (Cleopatra), on the right column under Navigation, if you select Preview 1, 2, 3 or 4 under Navigation Style, you’ll notice that the Circle & Arrow icon appears along with the Preview Icons, which is weird since I thought the Circle & Arrow is supposed to disappear when selecting the Preview Style Nav. Button.

    I’ll await your response. My WP login is in the Private Content Field. Thanks again.

    Please, contact administrator
    for this information.
    #55089 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 7, 2015 at 08:22

    Hello,

    I’ve added this code in custom.css file:

    .rev_slider_wrapper .tparrows:hover {
  background-color: black !important;
}

.rev_slider_wrapper .tparrows:hover:before{
  color: white !important;
}

.rev_slider_wrapper .tparrows {
  background-color: black !important;
}

    If you want to have black arrow when hovering a slide add this code:

    .rev_slider_wrapper .tparrows::before {
   color: black !important;
}

    Could you please show a screenshot of the issue with preview? It’s a bit unclear.

    Thank you.
    Regards,
    Eva Kemp.

    #55154 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 7, 2015 at 08:35

    Ahhh…the CSS you’ve added is perfect to display the Nav Arrow, Thank you so much!

    Ignore the Preview Arrow issue, I’m not going to deal with that now since the circle arrow option will do.

    However, could you also log back into my WP Panel check my main Rev. Slider (Cleopatra), under Settings then Appearance: Shadow Type. I wanted to add a base shadow 1, 2 or 3, but it’s not displaying. I tried changing the Slider to Fixed and then Auto Responsive, but it’s not showing when viewed on the live site. I know it saids the shadow doesn’t work on Full Width, but I’m also working on another Template, with the same Rev. Slider setting, and yet that one shows the Shadow. Thanks.

    #55164 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 7, 2015 at 11:17

    Hello,

    The reason is you added slider in “Show revolution slider instead of breadcrumbs and page title” section in the page editor. If you add it with “Revolution Slider” element in Visual Composer editor the shadow will be shown.
    Please check it.

    Regards,
    Eva Kemp.

    #55252 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 7, 2015 at 17:08

    Okay, I added the REV Slider using element in V.C. and it shows the shadow.

    But how do I turn off the previous SHOW REVOLUTION SLIDER INSTEAD OF BREADCRUMBS…? Under the Revolution Slider Option panel, I don’t see an option to turn that off. Right now, it’s showing 2 Rev. Sliders on my homepage…lol

    #55429 Copied
    Avatar: khoavo
    khoavo
    Participant
    April 7, 2015 at 17:19

    Oh never mind, I figured it out. I just saw the REV Slider tab settings on the right column…lol

    THANK YOU SO MUCH FOR YOUR HELP. MUCH APPRECIATE IT! I’ll start a new topic if/when I have new issues.

    #55432 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    April 7, 2015 at 19:07

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

    #55446 Copied
  • Viewing 19 results - 1 through 19 (of 19 total)

The issue related to '‘Header Top Bar – Customization’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Phone Service – WordPress WooCommerce Theme
lazy-placeholder
Crypto Mobile App – WordPress WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
Barbershop – WordPress WooCommerce Theme
lazy-placeholder
Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Coffee Store – WordPress WooCommerce Theme
lazy-placeholder
Purely Handmade – WordPress WooCommerce Theme
lazy-placeholder
Rental Car – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.