-
AuthorPosts
-
February 6, 2014 at 8:28 pm #220652
1+2 ) Easy Slider/ Photo/ Text Block within Color Section:
I am trying to place an easy slider within a color section and have it fill the height to 100% yet be in a 1/3 column layout area and text next to it in 2/3 column. there is a fixed border around the easy-slider which I cannot get rid of – any code?
– this is the css I defined the color section area with:
#workshopscolorsection {
height: 360px!important;
}
.avia-slideshow-inner {
padding: 0px; margin: 0px, 0px, 0px, 0px;
}
– Alternative is to have a photograph within the color section but when I try that the content (in a text block) rides over the photograph.
– Another alternative is to have a photograph within a text block but the photograph will not flush to the top of the color section – and when we go to mobile mode the text in the color section rides over the text in text blocks placed below the color section – the same happens with any text block within the color section.
– In mobile mode the entire page is a mess.Any solution to what I am trying to do? HOPE THIS IS CLEAR
5 ) HEADINGS:
I have resized all the headers. How to reduce line-height between headings and other heading? Or is the line-height automatically considering the 150% I programmed in. Also the line-height in mobile mode does not reduce proportionally.4 ) HEADER:
This is some code you gave someone else to keep the logo in the header full-size when scrolling
#header_main .container,.main_menu ul:first-child > li > a, .logo img, .logo a {
height: 115px !important;
line-height: 115px !important;
max-height: none !important;
}problem I am having is that in scroll modus there is no padding under the logo – code?
sometimes the logo squishes together to be very thin.5 ) CSS to alter SIDE MENU font, colour?
Thanks!
I have tried to be as clear as possible hope it is!February 6, 2014 at 8:29 pm #220653This reply has been marked as private.February 7, 2014 at 4:45 pm #220917Already found the solution to one – the css I placed on the color section was fixed at a certain height – fixed that so the bar expands now in mobile mode and the content does not ride into the content below the color section. Would still like to understand how to get those photos/slideshows to be in the color section without padding etc…..
Also found your code for adding padding under the logo in the header – so that is also taken care of
Thanks!
One further question: I have added some code into quick CSS (as you have told others in other threads
Is there a reason to put it there? Can I add it rather in my main CSS?- This reply was modified 10 years, 10 months ago by DaraEmerson.
February 7, 2014 at 6:15 pm #220985I have searched and found some code you provided to answer question 5)
HOWEVER the a:active is NOT working I am getting a brown color instead of the css definitions.
Need code to remove lines and change font style – thanks
See below:.main_color .sidebar a {
color: #d1ada1;
}.main_color .sidebar a:hover {
color: #7aa84a;
}.main_color .sidebar a:active {
color: #cc4c21;
}- This reply was modified 10 years, 10 months ago by DaraEmerson.
February 8, 2014 at 4:45 am #221117Hey!
Are you talking about the nested nav on the sidebar? Please post a link to the actual page with the sidebar nav. You can use this to change the active state of the menu:
.nested_nav .current_page_item a { color: #cc4c21; !important; }
Cheers!
IsmaelFebruary 8, 2014 at 1:16 pm #221215Thanks Ismael!
This does not work.
We have a right sidebar – default, set in Enfold Child under Theme OptionsWould still like to understand how to get those photos/slideshows to be in the color section without padding etc…..
Also the logo in the HEADER still sometimes sits flush when in scroll mode (thought it was fixed)
Vertically in the iPod the logo is squished (width) – have not yet checked on the mobile.Thanks – nearly finished with the visual and have to check the browsers and W3 verification.
- This reply was modified 10 years, 10 months ago by DaraEmerson.
February 11, 2014 at 4:51 am #222029Hi!
Your child theme sets the color of the sidebar menu nav links right now with this:
.main_color .sidebar a { color: #d1ada1; }
and
.main_color .sidebar a:hover { color: #7aa84a; }
Slideshows inside columns have a margin which is set by:
.flex_column .avia-slideshow { margin: 20px 0; }
So you can target that inside of the color section ID and remove the margin if you want.
Your logo gets squished because you only set a max height but the theme still sets its max width to adjust for the larger menu as the theme shrinks down. You also need to add a declaration for max-width as needed.
Regards,
DevinFebruary 12, 2014 at 11:59 am #222713Sidebar Navigation
Thanks – In my reply #220985 to you I have this code (for the sidebar navigation)what is NOT working is the a:active –
-
I would like to have the color (shown in the code below) and be able to remove the color in the background
. Default :active seems to be black or the main content colour.
.main_color .sidebar a:active {
color: #cc4c21;
}Margin – COLOR SECTION
so this is what I put into the CSS: (with and without a “.” before the workshopcolorsection) and it did not work
.flex_column .avia-slideshow workshopscolorsection {
margin: 0px 0 0 0;
}…so I did this and the result is that, at the top there is no padding but at the bottom (of the easy-slider) there is.
#workshopscolorsection .flex_column .avia-slideshow {
margin: 0px, 0px, 0px, 0px;
}If I add some space within the 2/3 column and under the content (next to the 1/3 column which houses the easy-slider) there is MORE space under the easy-slider as well.
Is there a solution?
February 12, 2014 at 12:18 pm #222720photograph within a text box within a color section:
http://www.tcm-team.at/workshops/
http://www.tcm-team.at/studienreise-nach-china/easy slider in a color section:
http://www.tcm-team.at/sommer-akademie-am-bauernhof/February 13, 2014 at 9:30 pm #223657Hey!
Sidebar Navigation
Please add following code to Quick CSS.main_color .sidebar .current_page_item>a { color: #cc4c21; }
Margin
Please change following#workshopscolorsection .flex_column .avia-slideshow { margin: 0px, 0px, 0px, 0px; }
to
#workshopscolorsection .flex_column .avia-slideshow { margin: 0; }
Best regards,
YigitFebruary 14, 2014 at 12:27 pm #223909NOTHING SEEMS TO WORK
NAVIGATION
This code you provided me with worked for the a: current (how to remove the bar of color?
.main_color .sidebar .current_page_item>a { color: #cc4c21;}
The default “a” is very light (seems to be 50% of a solid colour. any way to change this?
same with the main navigation.
Please send code for Main Navigation to adjust:
color a
color a:hover
color ul a
color ul a:hover
WITHOUT this percentage of chose color making it too light.Allowing anything within a color section without padding, margin etc… seems to be difficult
On Page: Workshop
http://www.tcm-team.at/workshops/
I tried a photograph in a 1/3 column, content in a 2/3 column – within a color sectionOn Page Sommerakademie:
http://www.tcm-team.at/sommer-akademie-am-bauernhof/
easy-slider in a 1/3 column, content in a 2/3 column – within a color section
used your code here and now there is no margin or padding at the top but still at the bottom.
when I add padding to the text column the slider also takes on paddingOn page Studienreise
http://www.tcm-team.at/studienreise-nach-china/
content wrapped around a photograph – within a color section- This reply was modified 10 years, 10 months ago by DaraEmerson.
February 17, 2014 at 3:47 pm #224976Hey!
Please add following code to Quick CSS as well and adjust as needed
.header_color .main_menu ul:first-child > li > a { color: red; } .header_color .main_menu ul:first-child > li a:hover { color: green; } .header_color .main_menu .menu ul li a { color: orange; } #top .header_color .main_menu .menu ul li>a:hover { color: blue; }
Please elaborate, i am not sure what you mean bar of color.
You can decrease the bottom margin of Workshops section with following code
#workshopscolorsection .hr-invisible, #sommerakademiecolorsection .hr-invisible {display: none; } #studienreisecolorsection { margin-top: -45px; }
Best regards,
YigitFebruary 17, 2014 at 5:00 pm #224994Great Thanks! works!
The code still needed :
– MAIN NAVIGATION (TOP) a:CURRENT and adjustment of height/color of marker for a:current
– HOW TO ADJUST WIDTH OF DROP-DOWN menu
– HOW TO REMOVE hover BACKGROUND BAR of colourFOR SIDEBAR NAVIGATION:
– HOW TO REMOVE hover/current BACKGROUND BAR of colour and replace with an alternative text decoration
– how to add place below navigation so there is padding between navigation and a widget.SLIDE SHOW ETC::: follows….
Thank you for all your help – nearly finished and can do the next one with enfold in a breeze.February 17, 2014 at 5:09 pm #224997OK So this is all the code you have been feeding me and I have found searching through your forums
It is all in the Style sheet and the “studienreise” works the best EXCEPT that the typography is also now glued top and bottom due to the last code you sent which blocks the “.hr-invisible” needed so the typography does not glue to the top
#workshopscolorsection .hr-invisible, #sommerakademiecolorsection .hr-invisible {display: none; }
#studienreisecolorsection { margin-top: -45px; }I am assuming that this colour bar is not meant for what I am attempting.
http://www.tcm-team.at/studienreise-nach-china/
http://www.tcm-team.at/sommer-akademie-am-bauernhof/
http://www.tcm-team.at/workshops//*COLOR BAR*/
#workshopscolorsection .flex_column .avia-slideshow {margin: 0;}
.avia_image.avia-align-center { display: block; margin: 0; text-align: center; }
.avia-align-center.avia_image.avia-builder-el-no-sibling { margin: 0; padding 0; }#studienreisecolorsection .flex_column .avia-slideshow { margin: 0; padding: 0; }
#sommerakademiecolorsection .flex_column .avia-slideshow { margin: 0; padding: 0; }February 17, 2014 at 11:04 pm #225149Hey!
Please add following code to Quick CSS
1-.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: blue; } .header_color .avia-menu-fx { background-color: yellow; } .header_color .avia-menu-fx .avia-arrow, .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu { border-color: yellow; }
Height looks good on my end http://i.imgur.com/6kXBrNP.jpg
2-.main_menu .menu ul { width: 250px; }
3-
.header_color .main_menu .menu ul li a:hover { background-color: transparent; }
4-
.main_color .widget_nav_menu ul:first-child>.current_page_item { background: transparent; }
5-
#top .widget_nav_menu .nested_nav { padding-bottom: 60px; }
Cheers!
YigitFebruary 18, 2014 at 8:35 pm #225720Thanks but the “current” navigation on the header is only evident when one is in the first submenu item i.e. the first open page of a main navigation item. When one goes to another page item within the menu item the “current” is lost.
The css for the navigation looks unclean.
/*NAVIGATION*//*ROLLOVER/CURRENT MENU DECORATION*/
.header_color .avia-menu-fx {
background-color: #7aa84a;
}
.header_color .avia-menu-fx .avia-arrow, .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-color: #7aa84a;
}/*MAIN*/
.header_color .main_menu ul:first-child > li > a {
color: #d45226;
}#top .main_menu ul.menu li a {
font-size: 14px;
}/*MAIN NAVIGATION HOVER*/
.header_color .main_menu ul:first-child > li a:hover {
color: #7aa84a;
}/*MAIN NAVIGATION CURRENT*/
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {
color: #7aa84a;
}/*MAIN NAV SUB NAVIGATION*/
.header_color .main_menu .menu ul li a {
color: #d45226;
font-weight: 600;
}#top .main_menu .menu li ul a {
font-size: 14px;
line-height: 15px;
}/*MAIN NAV SUB NAV HOVER*/
#top .header_color .main_menu .menu ul li>a:hover {
color: #7aa84a;
background-color: transparent;
}/*MAIN NAV SUB NAV CURRENT*/
still need this code/*SIDE NAVIGATION*/
.main_color .widget_nav_menu ul:first-child>.current_page_item {
background: transparent;
}.main_color .sidebar .current_page_item>a {
color: #7aa84a;
}.main_color .sidebar a {
color: #d45226;
}.main_color .sidebar a:hover {
color: #7aa84a;
}.sidebar {
font-size: 14px;
line-height: 17px;
}.js_active .tab {
font-size: 14px;
}THANKS
how to remove the lines on the side navigation current item ?
February 18, 2014 at 8:39 pm #225726in telephone mode the logo on the header has no space below – how to fix this?
how to add code so the telephone number can directly telephone from the phone?
February 18, 2014 at 11:54 pm #225818Hey!
Please add following code to Quick CSS as well
.widget_nav_menu ul:first-child>.current_page_item { box-shadow: none; } @media only screen and (max-width: 767px) { .responsive .logo { height: 120px; }}
You should add this way http://stackoverflow.com/questions/17219688/href-tel-and-mobile-numbers
Best regards,
YigitFebruary 19, 2014 at 2:08 pm #226169Aha!
Perhaps the problem is with the sidebar navigation code you have given me is that it is NOT a widget but the normal sidebar navigation
(the reason why it is not in alphabetical order is because I used the order that page should be in the page editing area)
AGAIN: the current page item for the side navigation works only for the first (top) page
when one chooses another page on the sidebar the main navigation no longer shows which main menu item one is in.SOLUTION?
TELEPHONE solutions WORK GREAT! – thanks
February 19, 2014 at 2:10 pm #226171….AND with the color section:
is there ANY solution that a photograph or easy-slider can be flush top and bottom padding, margins 0000
AND have the typography next to it with space top and bottom?February 20, 2014 at 2:10 pm #226746Hey!
It does work fine on my end http://i.imgur.com/4YXoqyF.jpg
Please post a screenshot and show the issue.
You can check the color section ID and remove padding as following#your-color-section-id .content { padding-top: 0; padding-bottom: 0; }
Regards,
YigitMarch 1, 2014 at 11:49 am #231041NAVIGATION STILL DOES NOT WORK
AGAIN:
Perhaps the problem is with the sidebar navigation code you have given me is that it is NOT a widget but the normal sidebar navigation
(the reason why it is not in alphabetical order is because I used the order that page should be in the page editing area)AGAIN: the current page item for the side navigation works only for the first (top) page
when one chooses another page on the sidebar the main navigation no longer shows which main menu item one is in.SOLUTION?
the side navigation is in green but the top navigation “ausbildung” should also be green
http://www.tcm-team.at/ausbildung/module-und-preis-uebersicht/- This reply was modified 10 years, 9 months ago by DaraEmerson.
March 2, 2014 at 3:20 am #231164Hey!
Please add this on Quick CSS to highlight the ancestor menus when viewing the child pages:
.current-menu-ancestor a { color: green !important; }
Regards,
IsmaelMarch 4, 2014 at 12:03 pm #232147the menu now is more of a mess
yes: the side menu corresponds to the main navigation
HOWEVER: the entire drop-down menu is all in green – roll-over option has disappearedhttp://www.tcm-team.at/ausbildung/supervision/
- This reply was modified 10 years, 9 months ago by DaraEmerson.
March 4, 2014 at 12:04 pm #232148excuse the ignorance but how to post a screenshot?
March 4, 2014 at 4:43 pm #232288Hi!
You can upload your screenshots on imgur.com or Dropbox public folder and post the links here
Cheers!
YigitMarch 4, 2014 at 5:55 pm #232329hope this is the correct thing to look at
top shot shows the drop-down menu all green (should be orange) without the “current” menu item showing
bottom shot is a photo rolloever where it “loses it” – how to delete the rollover effect on images?March 5, 2014 at 8:58 am #232604Hi!
Hope you’re feeling well today! Thank you for using the support forum.
Sorry for the menu color change code. Please use this instead to highlight the ancestor menu:
.current-menu-item.current-menu-ancestor > a { color: green !important; }
You can remove the image overlay using this on Quick CSS:
.image-overlay { display: none !important; opacity: 0 !important; }
Regards,
IsmaelMarch 5, 2014 at 12:56 pm #232682Still does not work! http://imgur.com/a/JqFRb
Now we have lost the green current in the drop down as well as the main navigation current
The photographs have no longer the rollover marker but when one rollover the photograph still goes down except in “studieneriese”Again here is the css for the Navigation – It is all VERY unclean but all from what you have given me added in bits and pieces. I do not know how to make sense of it:
/*NAVIGATION*//*ROLLOVER/CURRENT MENU DECORATION*/
.header_color .avia-menu-fx {
background-color: #7aa84a;
}
.header_color .avia-menu-fx .avia-arrow, .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-color: #7aa84a;
}/*MAIN*/
.header_color .main_menu ul:first-child > li > a {
color: #d45226;
}#top .main_menu ul.menu li a {
font-size: 14px;
}/*MAIN NAVIGATION HOVER*/
.header_color .main_menu ul:first-child > li a:hover {
color: #7aa84a;
}/*MAIN NAVIGATION CURRENT*/
.header_color .main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child .header_color > li.current_page_item > a {
color: #7aa84a;
}/*MAIN NAV SUB NAVIGATION*/
.header_color .main_menu .menu ul li a {
color: #d45226;
font-weight: 600;
}#top .main_menu .menu li ul a {
font-size: 14px;
line-height: 15px;
}/*MAIN NAV SUB NAV HOVER*/
#top .header_color .main_menu .menu ul li>a:hover {
color: #7aa84a;
background-color: transparent;
}/*MAIN NAV SUB NAV CURRENT
.current-menu-ancestor a {
color: #7aa84a !important;
}*//*SIDE NAVIGATION*/
.main_color .widget_nav_menu ul:first-child>.current_page_item {
background: transparent;
}.main_color .sidebar .current_page_item>a {
color: #7aa84a;
}.main_color .sidebar a {
color: #d45226;
}.main_color .sidebar a:hover {
color: #7aa84a;
}.sidebar {
font-size: 14px;
line-height: 17px;
}.js_active .tab {
font-size: 14px;
}+ css from quick css:
.current-menu-item.current-menu-ancestor > a {
color: green !important;
}March 14, 2014 at 5:42 am #237388At this point it sounds like you need assistance from a freelance developer to go through and customize the individual elements as needed. Support is really not for customization requests although we do help where we can as our current queue allows.
Right now with how active things are we really can not assist with individual customization like the above. I would suggest either Codeable or Microlancer which both have good rates for freelancing.
-
AuthorPosts
- The topic ‘COLOR SECTION; Easy Slider; HEADINGS; HEADER with scroll; SIDE MENU CSS’ is closed to new replies.