Hi All,
I’m going to close the topic for now and tag it for Kriesi. I figured we would start getting requests for a lot of the customization he did to the child theme used on the new site but we don’t actually have access to any of those files so it would be guesswork or re-doing it from scratch.
In any event, Kriesi will be able to be able to give us a final word on if it falls under needing to be done by a freelance developer (outside of basic support) or if he’ll be including any of the new things he customized into the main theme/providing the customization in some other format.
Regards,
Devin
Hi Josue
Thanks for your super quick reply.
I have solved it, after a day puzzling I found that I have to use the inner ID of the Avia builder elements.
Not 1,3,5,7 etc but
2,4,6,8 etc
This custom CSS works, It makes the first Icon on a page colored orange
#top .avia-builder-el-2.main_color.iconbox_top .iconbox_icon {
background-color: #faa127;
}
Hi,
Yes, please check this topic.
Regards,
Josue
I want to make every top-icon box on a page to have its own color for the icon background circles. I found this thread, but I was not able to make the CSS code that worked.
#top.main_color.iconbox_top .iconbox_icon {
background-color: #faa127;
}
This works for every iconbox, but how to I specify each individual icin box.
I have found the ID which are 1,3,5,7 etc
How does the CSS code has to look for one box?
I’d like your buttons to all look flat, none of that old-fashioned gradient tints on them anymore. Right now things just don’t match with one another when using contact submit button, etc.
I’d like the social icons to appear UNDER the team member, rather than only appearing on hover. Or at least the option to do that. I just don’t think many people realize they can find that information that way, it’s poor UX.
I’d like the layer slider layers to be nameable, instead of being called “layer 3, layer 4, etc,” so I can stop hunting for stuff.
GREAT theme, best you’ve ever done, best anyone has, probably.
Had the same issue, found I had to reduce the logo to 90px tall to stop it from disappearing under the content area of the page in IE 8. It also does not “reduce” when responsiveness happens, but it’s liveable. The later IE versions all seemed to work fine.
Hi,
Here’s the code that makes that behavior happen:
#top .subtext{float:left; position: relative;}
#top .logo img{float:left;}
.logo, .logo a{overflow: visible;}
#top .logo-title{
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-size: 12px; color: #000; position: absolute; left:7px; top:-7px; opacity: 1; white-space: nowrap; }
#top .logo-subtitle{ color: #aaa; top:7px; }
#top .header-scrolled .logo-title{ opacity: 0; filter: alpha(opacity=0); }
However, i think you also need to alter the HTML.
Regards,
Josue
-
This reply was modified 12 years, 5 months ago by
Josue.
Nothing happened I guess.
This is my custom css file now:
.content { padding-top: 15px; }
#header_main .container { height: 88px!important; line-height: 88px!important; }
#top .title_container .container { padding: 0; min-height: 36px; }
.fixed_header #main { padding-top: 56px; }
#top .main_menu .menu li>a { line-height: 85px!important; }
Homepage link stays and acts different from the others when I try to scroll the page down. Also dropdown menu doesn’t open at the correct position.
Thanks again.
Hi Yigit,
http://imotec.nl/
.container_wrap {
clear: both;
position: relative;
z-index: 1;
border-top-style: solid;
border-top-width: 0px;
}
.main_color h2 {
color: #0075ad;
}
.main_color h4 {
color: #0075ad;
}
.main_color .widget_nav_menu ul:first-child>.current-menu-item, .main_color .widget_nav_menu ul:first-child>.current_page_item {
background: #ffffff;
}
.widget_nav_menu ul:first-child>.current-menu-item, .widget_nav_menu ul:first-child>.current_page_item {
padding-left: 51px;
left: -51px;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.header_color .main_menu ul:first-child > li > a {
color: #a1c0dd;
}
.main_menu .menu ul li a {
background-color: #0076ad;
color: #a1c0dd;
}
.header_color .main_menu .menu ul li a {
background-color: #0076ad;
color: #a1c0dd;
}
#top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a {
color: #ffffff;
}
body .alignright {
float: right;
margin: 4px 0px 0px 20px;
display: block;
}
embed {
margin: 0px 0px 0px 20px;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Best regards,
Pieterjan
I saw several topics about this warning message related to the simple slider. I turned off all my plugins and rebuilt my page, checking at each step to see if it came back, and it did. I’ve solved the problem but wanted to let you know WHEN it showed up:
When I uploaded an image that was a different size from the others I’d uploaded.
Removing the photo that was a different size and resaving the slideshow solved the problem. It appears that the site won’t crop images, and it won’t allow different sized images using the “No Scaling” selector, either; either of those resulted in the warning message.
Hi,
My bad, it should be
#top .main_menu .menu li>a { line-height: 85px!important; }
Sorry :)
Regards,
Yigit
Hi Ismael,
our test site is open, you can view it at http://www-test.mines-telecom.fr.
Thanks for help
Hi,
Please add following code to Quick CSS as well
.fixed_header #main { padding-top: 56px; }
#top .main_menu .menu li:first-child>a { line-height: 85px!important; }
Regards,
Yigit
Hi,
Please add following code to Quick CSS as well
.main_menu ul:first-child > li > a { line-height: 60px!important; }
This should do it
Regards,
Yigit
Hi ckerr44,
What may be happening is that the desktop user has narrowed their browser and the top menu (not the main menu) is too wide at that point and the whole layout doesn’t actually switch to the mobile layout until the browser is smaller so the menu items overlap.
Regards,
Devin
We are having a number of folks report that this page: http://ignatiansolidarity.net/iftj is switching to the mobile version on desktops and then showing a bunch of crazy code. It doesn’t happen all the time, nor does it seem specific to any one browser. Any idea why this might be happening?
It looks like the customization to your loop-index file has caused the default WordPress filters to stop getting added in. The default code for it does run through it and apply them here:
* ... last apply the default wordpress filters to the content */
$current_post['content'] = str_replace(']]>', ']]>', apply_filters('the_content', $current_post['content'] ));
`
but something has caused this not to work on the child theme version from what I can tell.
I’ve tagged the topic for Josue’s personal queue so he should be able to respond quickly when able.
Hi suthye,
In your theme files add this into the desktop media query that we provided in that file as a base:
.sub_menu {
right: 104px;
}
#top .social_bookmarks li {
float: right;
}
This will get you most of the way there. The image in the first menu item can actually be placed right into that menu text in your menus manager to get the next bit of the effect you are looking for.
You could then also target the Contact us menu by its ID and give it a negative margin to push it over to the right and do the same on the social icons. The main issue will be keeping it all responsive and cross browser compatible but keeping your css changes for the desktop at least in the desktop media query (in the custom.css file) should help for the most part.
Regards,
Devin
Hi Bruno,
Not at the moment no. The HR element has a whitespace setting for top/bottom spacing but left/right spacing would need to be done with either css or maybe an image inside a column element depending on the layout.
Regards,
Devin
With regard to this site: pilgrimmanor.org
How do I remove the hover effect on a particular menu item in the top menu—in this case, the green button in the menu? WebKit Inspector tells me the 3px red bottom border is coming from the LI element, but I can’t seem to target it with any border-bottom or background-color styles.
Also: Is there a better way to target this particular menu item other than using its ID? If users rearrange the menu, the menu item’s ID may change, breaking the styles I’ve set here.
Hi dear
I want to make image menu instead of words, which have hover and active effect.
Below is my website.
http://interpeople.co.kr/wp/
I used custom css as below,
—————————————————————————————————————————
.main_menu ul:first-child > li > a {
display:block;
background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_bg_grey.png) no-repeat top;
}
.main_menu ul:first-child > li a:hover,
.main_menu ul:first-child > li.current-menu-item > a,
.main_menu ul:first-child > li.current_page_item > a,
.main_menu ul:first-child > li.active-parent-item > a,
.main_menu ul:first-child > li.active-parent-item > a {
background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_pollimolli_blue.png) no-repeat top; display:block;
}
————————————————————————————————————————————————-
Now, hover and active are well done.
But I have two problems.
1) I want to use different background image for hover and active in each menu.
I tried to use menu id, but it did not work. ( ex: #menu-item-3964 .main_menu ul:first-child > li > a)
2) I don’t want show this background image in sub-menu; you can find blue color background when you hover on sub-menu.
I need your help.
Thanks in advance.
Hi,
is there a possibility to insert whitespace in Avia Layout Builder with Drag & Drop? Can´t see anything, there is just the horizontal ruler…
Or is the only way to do this inside CSS?
If I use for example 2 Columns, one with 3/4 and one with 1/4, is there the possibility top insert a vertical ruler between them, I mean a ruler that is used for a layout with sidebar?
Regards,
Bruno
I use WIndows 7 and Vista. When I tried screenr.com the website said, that they didn’t find Java on my laptop. Even though I installed it.
May it be a Java plugin problem? What environments does the Enfold theme need to work fully functional?
Hi,
I recently updated to the latest version of the Enfold theme and now some the Custom CSS I had inputed to change colours of heading etc is not working.
I had previously used the following codes to change the following elements
Heading colours – #top .entry-content h1 { color: #58585a; }
Blog post heading colour – .main_color .newsbox .news-headline {color: #58585a;}
Icon Box heading colour – .iconbox_icon.heading-color.avia-font-entypo-fontello {color: #58585a;}
Can you let me know why these codes would now not be working?
Thanks for your help!
But there is something wrong with the fonts they move upwards when i scroll, Please Chk the link
Thanks a lot mayne, Thanks a lot!
Hi,
Please try adding following code to Quick CSS in Enfold theme options under Styling
#header_main .container { height: 60px!important; line-height: 60px!important; }
.fixed_header #main { padding-top: 60px; }
By default it is 88px
Regards,
Yigit
Hi,
Masonry layout for blog is being considered. You can request it here https://kriesi.at/support/topic/enfold-feature-requests/
Regards,
Yigit