Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • January 11, 2016 at 4:49 am #562889
    catsolari

    Hi! So I’m trying to edit one of my pages. I want it to do the following things, and I can’t seem to do it:

    1) I want the background color for the table to be the background color for everything outside of the table too (so no white, just pink). How can I do this?

    2) Is it possible for the 2 rows of the table to overlap? Like, for the braid to come down on the comic?

    3) Is it possible to customise the navigation graphics? And how?

    4) How can I change the sidebar but only for that specific page? Or add an element to the sidebar that only shows up for that specific page?

    5) How can I add elements with mouseover functions (but with my own images)? Like, if I add an image (or say the banner), and when I put my mouse over it, it changes.

    Thank you so much!

    January 11, 2016 at 5:44 pm #563381
    Yigit

    Hey catsolari!

    1- Please add Color Section element to your page and choose to display pink background image and add your image inside that color section
    2- Yes, please edit your column (comic one) and give it a negative top margin value
    3- It is possible using custom CSS. Please elaborate on the changes you would like to make so we can provide you an accurate solution
    4- You can use this plugin – https://wordpress.org/plugins/widget-logic/ to display widgets on conditions. To display a widget only on that page, please add following condition

    is_page(568)

    5- It is currently not easily possible. You are going to need a custom code. If you elaborate on the changes you would like to make, we can throw in some quick codes

    Great drawings by the way!

    Cheers!
    Yigit

    • This reply was modified 8 years, 11 months ago by Yigit.
    January 15, 2016 at 4:00 am #565887
    catsolari

    Hey Yigit!

    Thank you for all your help! And thank you for the compliment!

    I still have some questions, if that’s okay:
    1) I added the color section and now there is more pink (yay!) but there is still white (at the right side- is that because of the border? Is there any way to change that for the comic page?). Also is it possible to change the menu for that page? Like be pink instead of white? Or the categories, like home, about, etc be another color (but just for that page)? Or to be able to add an image to the menu that only shows in that page? Or for the logo to change?

    2) I added the negative margin, but I still can’t get it to overlap- I may be doing something wrong. Would it be possible for you to check? (I’ll add the login information in the private content). Additionally, I tried to center the comic (so it’s entered in relation to the banner) and I just can’t seem to do it (it keeps running away to the left). How can I center it? (The slideshow doesn’t seem to have that option like the image does).

    3) The navigation is really hard to see when you want to go to the next page, it gets lost in the drawings. Is there any way to change the color or opacity maybe? And, could it be below or above the comic?

    4) Thank you for the information! I think what I wanted was to change the main menu styling aspects (where the home, about, portfolio are) and I talked about that above. (Oh and I downloaded the plugin, and tried to insert the code but I have no idea where to even begin putting it- but thank you!)

    5) For example, I have a version of the banner where the girl is smiling and the unicorn is frowning. So when someone mouses over the image, it changes from the one that’s currently there, to the other one.

    The theme is amazing by the way. I can’t code at all and have minimal knowledge of creating a webpage, and it’s super easy to use! And the support is amazing!

    Thank you again!
    Cat

    January 15, 2016 at 8:59 am #565996
    Vinay

    Hi!

    1.
    To remove extra white on the right
    Please goto enfold > General layout > Use stretched or boxed layout? Select stretched

    To change menu background color
    Enfold > General Styling > Logo Area > Background color

    2.
    Could you pelase provide a screenshot mockup for this.

    3.
    To change navigation position
    Enfold > Header > Menu and Logo Position

    4.
    Please check out this video to setup widgets on only selected sidebars

    5.
    To change images on mouse hover please check the below links

    Create a CSS Flipping Animation

    http://css3.bradshawenterprises.com/cfimg/

    Regards,
    Vinay

    January 15, 2016 at 10:54 pm #566340
    catsolari

    Thank you Vinay!

    I still have some questions left:

    1) I know how to change the menu background color, I was wondering if it could be changed for only one page. So for the frontage it would be white, then for the comic page, it would be pink. Is there a way to do this?

    2) Link to mockup in private content

    3) The navigation I’m talking about is the one in the slideshow- I put a link in the private content. Is it possible to change the position and/or color?

    Thank you for your help and information!
    Cat

    January 17, 2016 at 1:00 am #566652
    Vinay

    Hi!

    1.
    Changing the menu background to black on only one page by adding the page ID and the rest of the css as below posted code
    Find the page id of every page by right clicking on the page and inspect the <body> tag class names

    .page-id-568 .header_color .header_bg {
    color: white!important;
    background: black!important;
}

.page-id-568  .html_header_sidebar #header .av-main-nav > li > a .avia-menu-text {
    color: #FFFFFF;
}

    2.
    Thanks for the mockups it was easy to understand.

    3.
    Edit the background and color values to suit your design.

    
.avia-slideshow-arrows a {
   color: #000!important;
    background:#FFF!important;
    opacity: 1!important;
}

    Cheers!
    Vinay

    February 4, 2016 at 10:57 pm #578117
    catsolari

    Hi!

    Thank you for the information. I’m having some trouble though:

    1) I was able to change the menu background color (yay! thank you so much for the code). Is it possible to change the following things in only the comic page:

    a) The menu’s font color and link color
    b) The size of the menu
    c) The logo
    d) The lines that divide the sections in the menu

    2) I still haven’t found a way to center the slideshow with the comic as seen in the mockup. Is there any way to do it? (Link to mockup in private content)

    3) Thank you! If I want them hidden until you scroll over, what line of code should I add?

    4) Is there a way to reduce (in all pages) the width of the logo + main menu area?

    Thank you!

    Cat

    February 5, 2016 at 4:29 pm #578565
    Vinay

    Hi!

    Request you to create new tickets for different issues. It will help us help you faster and stay related tot he original topic. Thank you for your understanding.

    1. To change menu items please use the following code in Quick CSS.
    To target only one page find the page ID by right click and inspect and view the <body> tag it has many class names and a page ID like this ” page-id-568 ” use the correct page ID.

    /*Link Colors*/
.page-id-568 .av-main-nav .avia-menu-text{
color:#red!important;
}

/*Active Link Color*/
.page-id-568 .current_page_item a {
        color:#000!important;
	background:gold!important;
}

    2. slider is centered

    3. It requires a lot of customization but if you are interested to try it out you need to first hide the arrows and target arrows when user mouse over slider. something like the links below replace span with arrow class and parent with slider class
    http://stackoverflow.com/questions/14792574/css-child-set-to-change-color-on-parent-hover-but-changes-also-when-hovered
    http://stackoverflow.com/questions/12652525/make-css-hover-only-affect-parent-element

    4. To reduce logo width in all pages

    .html_header_sidebar .logo {
    width: 80%!important;
}

    Best regards,
    Vinay Kashyap

    February 9, 2016 at 1:42 am #579992
    catsolari

    Will do, thank you!

    I tried the Quick CSS outlined in your previous post to change the menu items link colors and active link color, but it’s not working, and I’m not sure why. I took a screenshot of my style page (attached in private content).

    Thank you so much for your help!

    Sincerely,

    Cat

    February 10, 2016 at 7:23 am #580851
    Ismael

    Hey!

    You can try this for the menu items’ initial color:

    .html_header_sidebar #header .av-main-nav > li > a .avia-menu-text {
    color: red;
}

    For the active link:

    .html_header_sidebar #header .av-main-nav li.current-menu-item > a .avia-menu-text {
    color: blue;
}

    For the hover state:

    .html_header_sidebar #header .av-main-nav > li:hover > a .avia-menu-text {
   color: violet;
}

    Adjust the color value as you please.
    Best regards,
    Ismael

    February 11, 2016 at 6:05 am #581442
    catsolari

    Thank you Ismael, but the code is still not working, and I’m not sure why. It seems to work if I write the code without the page id, but I only want to change the menu for a specific page (the comic page). Is there anything that can fix that?

    February 12, 2016 at 11:59 pm #582554
    Vinay

    Hi!

    It should work with the correct page id class name which is before each of the css block

    .page-id-568

    The css block with page ID will then be 

    .page-id-568  .html_header_sidebar #header .av-main-nav > li > a .avia-menu-text {
    color: red;
}

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 10 months ago by Vinay.
    February 13, 2016 at 6:09 am #582629
    catsolari

    Hi!

    So I copy and pasted the code, but it’s still not working. Any ideas how I can fix it?

    Thank you!

    February 17, 2016 at 3:52 pm #584786
    Andy

    Hey!

    I checked your Quick CSS field but the code Vinnie provided to you is not there. Please implement it and let us know when you are ready. Don’t forget to clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    February 17, 2016 at 6:36 pm #584887
    catsolari

    Hi!

    I added the code to the Quick CSS field, cleared the browser cache and refreshed, but it’s still not working. Should I try something else?

    Thank you so much with all your help and I’m sorry for all the trouble!

    Sincerely,
    Cat

    February 19, 2016 at 2:00 pm #586052
    Vinay

    Hey!

    We added the below code in Quick CSS and it works now! Please take a look at the site and let us know.

    .page-id-568  span.avia-menu-text {
    color: #FFF!important;
}

.page-id-568  .current-menu-item span.avia-menu-text {
    color: #000!important;
}

    Regards,
    Vinay Kashyap

    February 19, 2016 at 4:47 pm #586162
    catsolari

    Hi!

    Awesome!!! I’m so happy!

    Last question regarding this menu: What would be the code to add to change the hover and active link color so that it works?

    Again, thank you very much!

    – Cat

    February 19, 2016 at 5:10 pm #586168
    Vinay

    Hey!

    .current-menu-item in the previous code is the active link for that page only. please use the below code in quick css for hover effect.

    Google “codepen link hover effects” you will get lot of examples from which you can get CSS inspiration to make your menu links better than my example :)

    .page-id-568  li:hover span.avia-menu-text {
    background: cyan!important;
    color:#000!important;
}

    Cheers!
    Vinay Kashyap

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.