Close

Account

Documentation

Forum

Menu

customizing website

  • Post count: 39
    Wolkman
    July 15, 2014 at 7:17 pm #1724

    Hi Jegtheme!

    I would like to customize my website in several ways. Hope you can help me with this..

    – For my image galleries, I would like to have neither a plus, nor a caption when hovering over it.
    – Is it possible for the images not to expand when you click on them, or that I can set a maximum size for the images to expand (instead of the full size of the images).
    – For the right mouse-click protection, I would like that no pop-up comes up. Basically, I just would like the right-mouse click to be disabled, thus not showing an animation when you do click with the right-mouse button.
    – For the side navigtation strip, is it possible to customize the width and take out the thin black shadow-border which separates the side navigation strip from the rest of the website.

    Hope you can tell me what to do/ what CSS coding I need and where and how to implement it. Thanks a lot!

    Wolkman

    Post count: 2679
    Rai
    July 16, 2014 at 6:36 am #1750

    Hi Wolkman,

    1) So do you want to disable the hover effect?
    2) Can you tell me more specific on what images (gallery/portfolio) that you mean? With link it would be better.
    3) I’m afraid there is no option to do it at the moment. You will need to do customization of code (javascript) to remove the credits animation.
    4) Yes you can do it with custom CSS, please let me know which menu do you use, Mega Main Menu or native drop down? So I can give you the custom css for it.

    Thank you

    Post count: 39
    Wolkman
    July 17, 2014 at 9:38 am #1829

    Hi Rai,

    Thanks for your quick reply.

    1) When hovering over an image, the image slightly zooms in (I like that!) and either a big ‘plus’ appears or the image caption comes up (this you can set in the gallery options). I would like to have neither the big ‘plus’ nor the image caption. I just like the zooming effect. Also when you keep your mouse slightly longer on an image, it shows the image file’s name anyway, that I also like to have disabled. Basically I don’t want the image file name (or caption) to appear. I like it more clean πŸ™‚

    2) I would like to use either the Photoswipe or Magnific gallery expand script. I would like to be able to set the image expand-size manually (for instance, 3/4th of the screen instead of full screen). Or maybe I would like the image not to be able to get expanded at all (so that nothing happens when you click on the image thumbnail in the gallery). Are these things possible through CSS or ..?. I would like to have this for all my galleries (for instance the gallery on my homepage (www.woutervanderwolk.com), later I will add other galleries as well).

    3) Ok, could you help me with that? I am not familiar with Javescript or any other kind of coding

    4) I use a regular menu (no mega menu). Could you give me the separate codes for both (1) adjusting the width of the side navigation strip, and (2) for taking out/adjusting the thin shadow border of the side navigation strip.

    5) Finally I would like to add a facebook ‘Like’ button on my website, preferable below in the side navigation strip. I can’t find this option…

    Looking forward hearing from you…

    Post count: 2679
    Rai
    July 18, 2014 at 6:34 am #1855

    Hi Wolkman,

    1) To remove the overlay background and “+” icon you can add this CSS to Additional Style:

    To remove tooltip of image title just remove the Image Title from Jkreativ Media Gallery Builder

    2,3) You need to hire freelancer to doing that. That’s need custom change and I’m afraid it won’t be achieved by just adding CSS.

    4) This is css to remove line:

    And this for set width of line:

    5) You need to Add Facebook Fans Widget to Side Navigation Widget

    Best regards,
    Rai

    Post count: 39
    Wolkman
    July 19, 2014 at 12:40 pm #1909

    Hi Rai,

    Thanks for your reply.

    With respect to 4), the CSS you wrote gave me an error when I added it to Additional Style CSS.
    It said “Heading (H2) should not be qualified” for both the codes

    /* Remove Line */
    .mainnav h2:after {
    display: none;
    }

    and…

    /* Set Line Width */
    .mainnav h2:after {
    width: 50% !important;
    left: 50% !important;
    margin-left: -25%;
    }

    Should I have added this CSS somewhere else? Or? I was thus not able to either delete the line or change the width of the side navigation…

    With respect to 5), I did what you said, but it did not give me anything..I would just like to add the facebook ‘Like symbole’, that would add to other people’s facebook page that they liked my website…That’s all. Isn’t that possible?

    Thanks already…

    Post count: 2679
    Rai
    July 20, 2014 at 5:19 am #1915

    Hi Wolkman,

    4) Actually, thats just notice and I’m pretty sure those css works just fine as I tested on my local. Please give a try!

    5) I think that is Like Button, Please go create yours here: https://developers.facebook.com/docs/plugins/like-button then grab the code, go back to your Widget then add Text widget and paste your code here. Thats should works! πŸ™‚

    Thank you

    Post count: 39
    Wolkman
    July 21, 2014 at 8:05 pm #1961

    Hi Rai,

    Thanks for your help. I was able to add the facebook like button as a widget. Thank you. Yet, the widget is displayed directly under my menu in the side navigation bar. Is it possible for the widget to be displayed lower in the side navigation bar (at the bottom)?

    When it comes 4), the CSS codes that you gave me, it seriously does not work. I probably do something wrong, but don’t know what. I added the codes to my custom CSS style in the Jkreativ dashboard like this:

    .imagelist-content-wrapper .galoverlay {
    display:none;
    }

    /* Remove Line */
    .mainnav h2:after {
    display: none;
    }

    /* Set Line Width */
    .mainnav h2:after {
    width: 50% !important;
    left: 50% !important;
    margin-left: -25%;
    }

    The first code (removing the gallery plus-overlay) works perfect. The other two codes don’t do any.
    I hope you can take another look at it…

    The goal of removing the line at the border of the side navigation is to make the whole website more clean. If I am correct, it looks like the side navigations color is slightly different from the rest of the page, namely a bit creamy white instead of regular white (#ffffff). For the sake of having a clean website, could you also give me a working CSS code for changing the background color of the side navigation? Thanks very much….

    My website: http://www.woutervanderwolk.com

    Post count: 2679
    Rai
    July 23, 2014 at 10:04 am #2027

    Hi Wolkman,

    I checked your website and cannot see your FB widget on side navigation. If you want to make custom position for those widget you need to add custom css too.

    Ah, you made two mistake. First, you use both of those css Remove & Set Line Width, you supposed to use one of them. Of course you cannot see your line if you Remove it. Second, you use white color for the line, pleace check on Theme Customizer. If you want to set custom line width, use those Set Line Width CSS and not Remove Line CSS also pick color that not same with your background on customizer.

    Thank you

    Post count: 39
    Wolkman
    July 23, 2014 at 10:32 am #2028

    Hi Rai,

    I think we have some miscommunication. I don’t understand what you mean with all this.

    – Concerning the FB widget: I temporarily removed it, it is back again now..Could you please give me the custom css to customize the position of this (or any other) widget (vertical/horizontal position on the navigation bar).

    – I would like to customize the width of the whole navigation bar, not of the black shadow line that borders the navigation bar

    – That black shadow line I would like to be removed. The code you gave didn’t do anything, even if I only put this custom CSS:

    .imagelist-content-wrapper .galoverlay {
    display:none;
    }

    /* Remove Line */
    .mainnav h2:after {
    display: none;
    }

    I created another user account for my wp-admin. Could you please login and add the customs css for above things, because I probably do something wrong…Username: admin2, password: admin2. Let me know if anything is unclear. Thanks

    Please help me out with this. Thanks!

    Post count: 2679
    Rai
    July 24, 2014 at 6:47 am #2072

    Hi Wolkman,

    Sorry, I thought that you want to adjust the LINE width. Well, to adjust width of side navigation use this css:

    I’m pretty sure the remove line CSS works, just checked your backend and I see you haven’t put those css yet, so I just add it. Please check πŸ™‚

    Thank you

    Post count: 39
    Wolkman
    July 24, 2014 at 8:09 am #2076

    Hi Rai,

    THanks for your help. The CSS for customizing the width of side navigation is working smoothly. Great!
    Yet, the CSS for deleting the thin shadow black line did not work….the line is still there. ;-( You can check it out..? Thanks

    Besides, concerning the FB widget, you didn’t add any custom css to customize the position of this (or any other) widget (vertical/horizontal position on the side navigation).

    If you like, you can go into my wp-admin panel and add it. Thanks very much.

    Post count: 39
    Wolkman
    July 25, 2014 at 4:28 pm #2142

    Hi Rai,

    THanks for your help. The CSS for customizing the width of side navigation is working smoothly. Great!
    Yet, the CSS for deleting the thin shadow black line did not work….the line is still there. ;-( You can check it out..? Thanks

    Besides, concerning the FB widget, you didn’t add any custom css to customize the position of this (or any other) widget (vertical/horizontal position on the side navigation).

    If you like, you can go into my wp-admin panel and add it. Thanks very much.

    Post count: 2679
    Rai
    July 27, 2014 at 12:26 am #2197

    Hi Wolkman

    I just wondered which line that you refers to? Line in navigation is disappear. Is it the separator between Navigation & Widget?

    I’m not really sure what customize do you need for FB widget?

    Thank you

    Post count: 39
    Wolkman
    July 27, 2014 at 2:38 pm #2210

    Hi Rai,

    No problem, I will explain it again.
    If you look at the image that you enclosed in your last reply, you see that there is a a very thin line on the right side of the navigation. So next to the ‘V’ of Jkreativ, in this case. Somehow on my computer (no retina display), this line also has a shadow, so it is even more visible. I would like that line to be gone completely.

    About the widget. I would like the widget to be moved more down on the navigation bar. So is there CSS coding for customizing the position of the widget on the navigation bar? Would be great. Hope all is clear…

    Thanks!

    Post count: 2679
    Rai
    July 28, 2014 at 4:51 am #2225

    Hi Wolkman,

    Great, it seems clear now πŸ™‚
    Please try this CSS to remove shadow on side navigation and to add space before widget:

    If you want more space, just increase those 40px number.

    Hope that will helps you πŸ™‚

    Thank you

You must be logged in to reply to this topic.