-
Search Results
-
In reply to: Logo too Wide on Tablet and Phone
Hi,
You can make the logo smaller for that screen size while making the font smaller as well. Not much else you can do if you have that many menu items. Can ofcourse force the mobile menu earlier for that screen size as well. Here is the css code , please add it to your css/custom.css or to Quick CSS located in Enfold > Theme Options > Layout Styling… the text area at the bottom of the page:
http://www.clipular.com/c?9716021=yrkbqE9ieSXtdawm-vanJgl77ek&f=.png
@media only screen and (min-width:768px) and (max-width:989px) {
.logo {
width:230px;
right:110px;
position:relative;
}
.main_menu {
right:-70px;
}
.logo {
float:left;
position:absolute;
bottom:-10px
}
.container {
position:relative;
right: 30px
}
}Thanks,
Nick
In reply to: Font size
Topic: Font size
Hi Guys,
Need some help here please,
Having trouble positioning the submit button in-line.
There is a lot of info about this on your support forums which I’ve read, I’ve also tried my themes support forum among others.
I’m very new to web development so forgive me if I’ve missed something.
I would like to position the button inline & closer to the text input.
The theme is responsive so the submit button needs to stay aligned at various page sizes.
So far I have managed to re-position the submit button inline but can’t align the button.
Live Page: http://my-boiler.info/
An image of what I’m trying to do – http://my-boiler.info/re-position-submit-button.png
I’ve tried floating the footer to the right and using margin to target the button which works when viewing on a normal browser but not when resizing the page.
The theme I’m using is Enfold responsive.
The code I’m using –
* FORM BODY contains the main form content*/
body #gform_wrapper_1 .gform_body {
}
/*Postcode input*/
#gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] {
position:relative;
width:140px;
height:50px;
font-size:25px;
}
body #gform_wrapper_1 .gform_footer {
display: inline-block;
}
/*Submit button*/
body #gform_wrapper_1 .gform_footer input[type=submit] {
margin:0px 0px 0px 0px;
}
Some selectors are empty, I’ve just included above to give an idea of what I’ve tried.
Thanks,
Hi there,
How can I create a rollover effect with a basic av-font (entypo)? I’ve added a symple entypo font into my page builder page….
[av_font_icon color="#d74b00" icon="46" size="60"])
….and would like the color to change (from orange to white) on pointer rollover. I would also like to have the ‘down state’ link to another place on the web site.
In reply to: Social Icon at Socket
Hi,
Try this. Please add it to your /css/custom.css file. If you want to change something, font size, social bookmark positioning, copyright positioning are there in the code below, but i think this will work well.
@media only screen and (max-width:400px) {
#socket {
font-size:.73em;
}
#top #socket .social_bookmarks {
right:-16px;
}
#socket .copyright {
position:relative;
left:-13px;
top: 5px;
}
}Thanks,
Nick
Topic: Color Section ID
Hello. I have a Color Section on my page that includes a Text Block. I would like to customize the font style, size, color, etc. of text block.
I created a Section ID for the Color Section and I assume I should be able to customize the text using CSS. Can you please provide an example on how to reference the the Section ID and associated text block. I thought it would be something like below. Thanks.
.page_id=36 .colorsecid h1 {
color: red;
}
In reply to: Reimport Landing Page
Please insert following code into the “standard editor” textarea and save the entry. Then click on the “Advanced Editor” button to edit the content.
[av_layerslider id='1']
[av_one_third first]
[av_icon_box icon='17' position='left' title='Checkit!']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean <strong>commodo ligula</strong> eget dolor. Aenean massa. Cum sociis
[/av_icon_box]
[/av_one_third]
[av_one_third]
[av_icon_box icon='50' position='left' title='Green Power']
Aenean massa. Cum sociis natoque penatibus et magnis dis <strong>parturient montes</strong>, nascetur ridiculus mus. Lorem ipsum dolor sit amet
[/av_icon_box]
[/av_one_third]
[av_one_third]
[av_icon_box icon='125' position='left' title='Recycle that']
Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque <strong>sadfsadfas</strong>
[/av_icon_box]
[/av_one_third]
[av_promobox button='yes' label='Click me' link='manually,http://' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='25']
A typical landing page should have many possible exits for the user to purchase your Product. Enfold allows you to add as many as you want
[/av_promobox]
[av_section color='footer_color' custom_bg='' src='' position='top left' repeat='no-repeat' attach='scroll' padding='large' shadow='no-shadow']
[av_one_half first]
[av_gallery ids='316,315,314,313' style='big_thumb' preview_size='portfolio' columns='7']
[/av_one_half][av_one_half]
[av_textblock]
<h2>Any Layout imaginable</h2>
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_textblock]
Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing elit</strong>. Aenean commodo ligula eget dolor. Aenean massa.
<ul>
<li>Nulla consequat massa quis enim.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</li>
<li>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</li>
<li>Aenean <strong>vulputate</strong> eleifend tellus.</li>
</ul>
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_button label='Learn more...' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' position='left' icon_select='yes' icon='121']
[/av_one_half]
[/av_section]
[av_section color='alternate_color' custom_bg='' src='' position='top left' repeat='no-repeat' attach='scroll' padding='large' shadow='shadow']
[av_one_half first]
[av_textblock]
<h2 style="text-align: right;">About Us</h2>
[/av_textblock]
[av_hr class='short' height='70' position='right']
[av_textblock]
<p style="text-align: right;">Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing elit</strong>. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p style="text-align: right;">Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean <strong style="text-align: right;">vulputate</strong> eleifend tellus.
[/av_textblock]</p>
[av_hr class='short' height='70' position='right']
[av_button label='Check out our Team' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' position='right' icon_select='yes' icon='14']
[/av_one_half][av_one_half]
[av_iconlist position='left']
[av_iconlist_item title='Crafted with love' icon='43']
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.
[/av_iconlist_item]
[av_iconlist_item title='Melodical by nature' icon='51']
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
[/av_iconlist_item]
[av_iconlist_item title='Lightning Fast' icon='64']
Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
[/av_iconlist_item]
[av_iconlist_item title='Freaky Flags' icon='41']
Nullam quis ante. Etiam sit <strong>amet orci eget</strong> eros faucibus tincidunt. Donec vitae sapien ut libero venenatis faucibus.
[/av_iconlist_item]
[/av_iconlist]
[/av_one_half][av_promobox button='yes' label='Click me' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='25']
A typical landing page should have many possible exits for the user to purchase your Product. Enfold allows you to add as many as you want
[/av_promobox]
[/av_section]
[av_section color='main_color' custom_bg='' src='' position='top left' repeat='no-repeat' attach='scroll' padding='default' shadow='no-shadow']
[av_one_half first]
[av_image src='745' align='right' animation='left-to-right']
[/av_one_half][av_one_half]
[av_textblock ]
<h2>Feature A</h2>
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_textblock]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_button label='More about Feature A' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' position='left' icon_select='yes' icon='12']
[/av_one_half]
[/av_section]
[av_section color='alternate_color' custom_bg='' src='' position='top left' repeat='no-repeat' attach='scroll' padding='default' shadow='no-shadow']
[av_one_half first]
[av_textblock ]
<h2>Feature B</h2>
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_textblock]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_button label='More about Feature B' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' position='left' icon_select='yes' icon='41']
[/av_one_half][av_one_half]
[av_image src='745' align='right' animation='left-to-right']
[/av_one_half]
[/av_section]
[av_section color='main_color' custom_bg='' src='' position='top left' repeat='no-repeat' attach='scroll' padding='default' shadow='no-shadow']
[av_one_half first]
[av_image src='745' align='right' animation='left-to-right']
[/av_one_half][av_one_half]
[av_textblock ]
<h2>Feature C</h2>
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_textblock]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
[/av_textblock]
[av_hr class='short' height='70' position='left']
[av_button label='More about Feature C' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' position='left' icon_select='yes' icon='2']
[/av_one_half]
[/av_section]
[av_section color='alternate_color' custom_bg='' src='' position='top left' repeat='no-repeat' attach='scroll' padding='large' shadow='shadow']
[av_textblock]
<h2 style="text-align: center;">What others say about us</h2>
[/av_textblock]
[av_hr class='short' height='50' position='center']
[av_testimonials columns='2']
[av_testimonial_single src='315' name='The Man' subtitle='CEO' link='http://www.wikipedia.com' linktext='WikiTravel']
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
[/av_testimonial_single]
[av_testimonial_single src='315' name='Anna Vandana' subtitle='CEO' link='http://www.wikipedia.com' linktext='Media Wiki']
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
[/av_testimonial_single]
[av_testimonial_single src='315' name='Maxi Milli' subtitle='CEO' link='http://www.wikipedia.com' linktext='Max Mobilcom']
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[/av_testimonial_single]
[av_testimonial_single src='315' name='Dr. Dosist' subtitle='CEO' link='http://www.wikipedia.com' linktext='Doom Inc']
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
[/av_testimonial_single]
[/av_testimonials]
[/av_section]
[av_promobox button='yes' label='Click me' link='manually,http://' link_target='' color='theme-color-subtle' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='25']
A typical landing page should have many possible exits for the user to purchase your Product. Enfold allows you to add as many as you want
[/av_promobox]In reply to: Social Icon at Socket
Hi,
There are only 3 ways to solve this:
1) Make the text “© Copyright – rdhl.in – Theme by Ayush” shorter by removing some of the words.
2) Make the text use a smaller font size
3) Put a <br tag before the word Theme so that Theme by Ayush will be on second line below the Copyright.
Thanks,
Nick
Topic: Custom CSS for your pleasure
Hi,
I just like to post some of my CSS hacks so others may use it with their own colors and formats. Have a look at the comments and try it for yourself.
/* This is some style specific stuff you may not need to include */
h1, h2, h3, h4, h5, h6, .widgettitle {font-weight:500; text-shadow: rgba(0,0,0,0.4) 1px 1px 2px; font-family:"Oswald",Helvetica,Arial,sans;}
.title_container .main-title {text-transform:uppercase; font-size:24px; font-family:"Oswald",Helvetica,Arial,sans;}
title, #top .alternate_color.title_container .main-title a {text-shadow: rgba(0,0,0,0.2) 1px 1px 2px;}
#footer h3.widgettitle {color:#e1e1e1;}
.avia_textblock h1 { margin-bottom:0px; text-shadow: 3px 3px 3px #000;}
/*#footer {background: none transparent}*/
#top .widget ul.children {margin-left:15px;}
.main_menu {font-family: Oswald, Helvetica, Arial;}
.main_menu ul:first-child > li > a {font-weight:400;}
.sort_by_cat a {border:#ad137f 1px solid; color:#fff; padding:0px 5px 0px 5px;}
.breadcrumb-title {display:none !important;}
.main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child > li.current_page_item > a {font-weight: 400;}
.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: #ad137f;}
.main_color .sidebar .current_page_item>a {color:#ad137f; font-weight:bold;}
.current_page_item>a {font-weight:400;}
/* Remove tranparency from header */
#header {background-color:#fff;}
/* HR Fullwidth remove margins */
.hr-full, .hr-big {margin: 20px 0;}
/* Making images more fancy (box and slight shadow) - CSS class 'framed' must be added manually to IMAGE */
img.framed {background: #f5f5f5; border: 1px solid #fff; outline: 1px solid #eaeaea; box-shadow: 0px 2px 2px rgba(0,0,0,0.6);}
body .alignleft, .entry-content a:link .alignleft, body .alignright, .entry-content a:link .alignright {padding: 4px !important;}
/* Displaying the line below main nav element when current page is level 3+ */
.current-page-ancestor a > .avia-menu-fx {visibility: visible;opacity: 1;}
.current-page-ancestor a > .avia-menu-fx .avia-arrow-wrap {overflow: hidden;display: block;}
/* Bold should be CI color */
.main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong {color:#ad137f;}
/* Center Title of Portfolio Item */
.main_color .grid-entry-title {text-align:center;}
/* Rework the menu shading (just a quite bit) */
#header .avia_mega_div {-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);}
.main_menu .menu ul {-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);}
.responsive #top.boxed .stretch_full {background:#f3f3f3;}
/* Fixing border radius of rounded images */
.avia-post-nav .entry-image img {border-radius: 4px;}
/* Modifiying Post-Nav background color (those nifty flyout-arrows left and right on news and portfolio) */
#top .avia-post-nav:hover {background: #ad137f; background: rgba(160,1,126,0.8);}
#top .avia-post-nav {background: #aaa; background: rgba(160,1,126,0.4);}
/* Remove rounded stuff (in case you prefer some qubic stuff) */
.avia-icon-list .iconlist_icon, .avia-testimonial-image, .avia-testimonial-image img, .iconbox_top .iconbox_icon {border-radius:4px;}
/* Removing the breadcrumb (no one need a breadcrumb on this) */
.title_container .breadcrumb {display:none;}
/* Menu Mods */
.header_color .main_menu ul:first-child > li.active-parent-item > a {color:#ad137f;}
/* Megamenu Mods */
#top #header .mega_menu_title a {font-size:15px; border-bottom: #ccc 1px dotted;}
#top #header .mega_menu_title a:hover {text-decoration:none;}
#header .avia_mega_div .units {border:none;}
/* Tagcloud Links */
.tagcloud a {background:rgba(250,250,250,0.4);}
.tagcloud a:hover {background:rgba(250,250,250,0.8); text-decoration:none;}
/* Tagcloud widget (I'm a lousy guy writing tags lowercase) */
.widget_most_popular_tags {text-transform: capitalize;}
/* Tabs (bold, font size, better to read) */
.js_active .tab {font-size:12px !important;}
.main_color .tabcontainer .tab_titles .tab {font-weight:bold;}
.main_color .sidebar_tab, .main_color .tabcontainer .tab:hover {color: #ad137f;}
/* Tables (what a mess) */
.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even) {color: #666;}
.main_color tr:nth-child(odd), .main_color .pricing-table>li:nth-child(odd), .main_color .pricing-extra {color: #666;}
.main_color tr:hover {background:#ad137f; color:#fff;}
/* Form Elements (stretching to 100%, responsible) */
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {width:100%;}
/* Ajax Contact Form (I'll leave this - plugin specific. Don't use it anymore) */
button.ajax-submit {margin:0;border: #ad137f 1px solid; background: #ad137f; color: #fff; padding: 10px; font-weight: bold;}
button.ajax-submit:hover {cursor:pointer;}
form.iwacontact span.ajax-feedback.error, form.iwacontact span.ajax-result.error {color:#ad137f;}
/* Sortable links (links are fine, but I prefer more of a button style) */
.main_color #js_sort_items a.active_sort, .main_color #js_sort_items a {color:#666;}
.main_color #js_sort_items a.active_sort {background:#ad137f; color:#fff; border:#ad137f 1px solid;}
.main_color #js_sort_items a:hover {background:#ad137f; color:#fff;}
.sort_by_cat a {border: #ccc 1px solid; padding: 3px 10px 3px 10px; background: #e8e8e8; border-radius:2px; margin-right:10px;}
#js_sort_items .text-sep {display:none;}
/* Widget News remove date/time (don't do this if you care about SEO) */
.news-time {display:none;}
.news-headline {margin-top:4px;}
/* Ajax Search results (didn't like the excerpt stuff and some other slight optimizations) */
.header_color .ajax_search_title {color: #666; line-height: 1.4em; height: 20px; margin-top: 3px; font-size: 14px; }
.ajax_search_response h4:first-child, .ajax_search_response h4 {font-size: 18px; text-transform:uppercase;}
.header_color .ajax_search_excerpt {display:none;}
#top div .ajax_search_entry_view_all {font-weight: normal; text-transform: uppercase;}
.ajax_search_image {border-radius:2px;}
/* Search results (doh!) */
.main_color .search-result-counter {background:#ad137f;}
.search-result-counter {box-shadow:none; border-radius:2px; color:#fff; font-weight:bold;}
.post-meta-infos {display:none;}
.template-search .entry-content .post-title {font-size:18px; margin:0; padding-top:10px;}
.responsive .boxed#top {-moz-box-shadow: 0 0 25px #000; -webkit-box-shadow: 0 0 25px #000; box-shadow: 0 0 25px #000;}
/* Remove dashed line from post overviews (News, Archives - should be fixed by Kriesi) */
.multi-big .post_author_timeline, .single-small .post_author_timeline {border-right-width: 0px;}
/* Adding a slight shadow to the small preview pics used in post overviews (still need x-browser stuff) */
.small-preview {box-shadow: 0 0 6px rgba(0,0,0,0.4);}
/* Form Elements (Contact Form 7) */
span.wpcf7-list-item {margin-left: 0; margin-right:10px;}
#top .footer_color input[type='email'] {border-color: #666; background-color: #333; color: #aaa;}
span.wpcf7-not-valid-tip {top: -52px; left: 1px; background: #ad137f; border: 1px solid #ad137f; padding: 4px; color: #fff;}
div.wpcf7-validation-errors {border: 1px solid #ad137f !important; background: #ad137f; color: #fff; text-align: center; font-weight: 600; padding: 4px;}
div.wpcf7-response-output {margin: 2em 0em 1em;}
/* Iconbox mouseover effect and changing the link behaviour (this is needed if you like to have the whole iconbox linked) */
.main_color.iconbox_top .iconbox_content:hover {background: #efefef;}
#top .iconbox_top a {text-decoration: none;color: inherit;}
/* Changing image overlays from circle to rounded square (there ya go) */
.image-overlay .image-overlay-inside::before {border-radius: 4px;}
/* 3D tag cloud with mug (in case you use this canvas-plugin try the coffee version) */
#myCanvasContainer {background: transparent url('https://media.pcamobile.de/mug.jpg') no-repeat top left;}
In reply to: button in menu
Hi,
Ohh, I thought that was the design, lol.
Ok in that case:
1) replace the button code you are using with this (i trimmed some of the fat off it, and lot more can go i think, but ok for now):
.menu #menu-item-2193 a {
-webkit-backface-visibility:hidden;
-webkit-perspective:1000px;
background:#a1ce5e url(https://d7uu0v95k7d3j.cloudfront.net/wp-content/themes/enfold/images/layout/bg-button.png?6c6f23) repeat-x;
border-bottom:1px solid #a1ce5e;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-image-outset:0;
border-image-repeat:stretch;
border-image-slice:100%;
border-image-source:none;
border-image-width:1;
border-left:1px solid #a1ce5e;
border-right:1px solid #a1ce5e;
border-top:1px solid #a1ce5e;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:rgba(0,0,0,0.5);
cursor:auto;
font:normal normal 600 14px 12px 'Open Sans',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;
height:30px !important;
line-height: 19px !important;
margin-left:0;
margin-right:0;
min-width:90px;
outline:rgba(0,0,0,0.5) none 0;
padding:5px 16px 10px;
text-align:center;
text-decoration:none;
text-shadow:rgba(255,255,255,0.09) 0 1px 0;
top:-10px;
vertical-align:text-top;
zoom: 1
}2) open up /js/avia.js and find block of code between lines 809-846 and replace it with this one below, they should look nearly identical but for 3 lines:
function avia_header_size()
{
var win = $(window),
header = $('.fixed_header #header'),
logo = header.find('.logo img'),
elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
element_button = $('.menu #menu-item-2193 a'),
el_height = $(elements).filter(':first').height(),
isMobile = 'ontouchstart' in document.documentElement,
scroll_top = $('#scroll-top-link'),
set_height = function()
{
var st = win.scrollTop(), newH = 0, newTopMargin =0;
if(st < el_height/2)
{
newH = el_height - st;
//header.removeClass('shadow');
newTopMargin = 52;
}
else
{
newH = el_height/2;
newTopMargin = 23;
//header.addClass('shadow');
}
elements.css({height: newH + 'px', lineHeight: newH + 'px'});
element_button.css({'margin-top': newTopMargin + 'px'});
}
if(!header.length) return false;
if(isMobile)
{
return false;
}
win.scroll(set_height);
set_height();
}Ok now if you ever change the menu, when you go to a live server, you need to remember to edit line 815 which has the menu-id hardcoded in there (#menu-item-2193) and to change it, as well as change it in the css, since any new website will obviously have new ID numbers.
Check you quick css, you have a block of css commented out, dont know if accidently or on purpose starting with this block below the button code –> /*blockquote {
Thanks,
Nick
In reply to: Short codes options don't show up in text blocks..?
Hi,
1.) Set your Advance Layout Editor to debug mode. Edit functions.php, go to line 16. Below, add this code.
//set builder mode to debug
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
return "debug";
}The code above will render the actual shortcode below the Advance Layout Editor.
You need to edit the shortcodes manually. Something like this:
[av_textblock ]
Click here to add your own text
[av_icon_box icon='1' position='left' title='IconBox Title' link='' linktarget='no']
Click here to add your own text
[/av_icon_box]
[av_button label='Click me' link='' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' position='center' icon_select='yes' icon='25']
[/av_textblock]2.) Referring to the code above, it is a combination of icon box and button inside a text block. You can do the same with buttons inside an icon box.
Regards,
Ismael
In reply to: Enfold Twitter/RSS widget
Hi,
The Twitter Widget has been disconnected due to the retirement of Twitter API v. 1.0 on June 9, and with the new API v 1.1, Twitter placed some restrictions on the distribution of its proprietary content (your tweets). I think Kriesi will either release an update or perhaps you would be better off getting a plugin to take care of Twitter
The icon you like is really a glyph, or a font and not an image, so you can add the font wherever you want in any size you want. See –> http://www.clipular.com/c?8964014=F5x1YRkE-13w_ZbugX56zyHqwro&f=.png
Thanks,
Nick
In reply to: Font Farben in Widgets
Hallo,
Bitte installieren Sie Erweiterter Text Widget Plugin http://wordpress.org/plugins/enhanced-text-widget/ die Ihnen erlauben, Ihre Text-Widgets anpassen viel mit ihren eigenen Klassen sowie Einsatz php oder jQuery direkt im Widget wird. um Farben in einem Textblock hinzuzufügen beinhaltet zwei Schritte.
1) Umgeben den Text in <p-Tags oder <div-Tags oder am wenigsten aufdringlich sind die <span Tags
<span class="myclass1">your text</span>2) Fügen Sie die Klasse Name, den Sie in Schritt 1 auf die / css / custom.css Datei erfunden, nachdem es Styling
#top .myclass1{
color:red;
font-size: 15px;
}Danke,
Nick
In reply to: Problem with Form
Hi,
Please see my answer here https://kriesi.at/support/topic/quform-inside-the-tabs#post-121288 about the qform
Copying sitehttp://www.clipular.com/c?8869008=7mQBTJWiDUJkYv1Ub3D0914l4LI&f=.png
You need to have a transparent background image and then:
To replicate the same thing as on the links you showed, make a page. add a color section element, Make the color section background aqua color, and inside it add three 1/3 elements. In first 1/3 element add an image element with the picture of confused clock wearer, in second 1/3 element add the text , and in third 1/3 element add a button.
Now will need some css to lower the size of the area so that man’s head and shoulders are pushed out on top, and move the button down :
.avia-button-center {
margin-top: 50px !important;
}
.avia-button .avia_button_icon {
font-size: 1.3em;
}
.avia-align-center.avia_image.avia-builder-el-no-sibling {
position: absolute;
top: -160px;
}My Settings on Page: http://i.imgur.com/nGnmkoM.png
My Settings for Color Element: http://www.clipular.com/c?8860015=YJMaD1BCoZh1eH4kFwUf6nmmLL4&f=.png
**Important, for my CSS to work, the image must be centered and the button must be centered —> My Settings for Image Element http://www.clipular.com/c?8869014=H0LGUZpSqkQ-2HIP4F_Bx62xUJc&f=.png … The same must be done when configuring the button element. or change my css to reflect your changes.
—-
You will definitely need to adjust the css for different screen sizes using media queries,. I suggest you use Google Developer Tools to change the css to by reusing my code but changing the numbers inside the media queries.
Thanks,
Nick
In reply to: button in menu
I got something like this, the button is there, but the text is way below the button. Could you please help to correct this :) Ismael?
Chris, you’ll need to change the colours to work with your theme.
.menu-item-1933{
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000px;
background-color: rgb(161, 206, 94);
background-image: url(https://d7uu0v95k7d3j.cloudfront.net/wp-content/themes/enfold/images/layout/bg-button.png?6c6f23);
background-position: 0px 0px;
background-repeat: repeat-x;
border-bottom-color: rgb(161, 206, 94);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(161, 206, 94);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(161, 206, 94);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(161, 206, 94);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.498039);
cursor: auto;
display: block;
float: left;
font-family: 'Open Sans', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 600;
height: 38px;
line-height: 16.796875px;
margin-bottom: 3px;
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 30px;
max-width: 100%;
min-width: 90px;
outline-color: rgba(0, 0, 0, 0.498039);
outline-style: none;
outline-width: 0px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px;
vertical-align: text-top;
zoom: 1;
height: 50px;
}In reply to: Responsive Layout problems with iPad/Tablets
Hi,
1.) Please add this on your custom.css or Quick CSS
@media only screen and (max-width: 900px) {
.responsive .title_container .breadcrumb {
position: relative;
right: auto;
top: -6px;
margin: 0;
left: -2px;
}
}2.) Use this
@media only screen and (max-width: 900px) {
.js_active .top_tab .tab {
border-bottom: none;
padding: 9px 5px 9px 5px;
font-size: 10px;
}
}3.) Please use this
@media only screen and (max-width: 900px) {
.iconbox .iconbox_content .iconbox_content_title {
letter-spacing: 0;
font-size: 12px;
}
}Seems like all of the issues above can be fix with media queries. You can combine all of the solution above.
Regards,
Ismael
In reply to: button in menu
Hi,
What type of header do you have?
I tested this on using header with bottom navigation. Edit header.php, find this code
<?php do_action('ava_main_header'); ?>
<div class='container'>Add the avia_button code below, something like this
<a href="http://www.google.com" class="menu-button-header avia-button avia-icon_select-yes avia-color-theme-color avia-size-small" target="_blank"><span class="avia_button_icon avia-font-entypo-fontello"></span><span class="avia_iconbox_title">Click me</span></a>Add this on your custom.css or Quick CSS
.menu-button-header {
position: absolute;
left: 300px;
top: 62px;
}Adjust the left and top position, depends on the number of menu.
Regards,
Ismael
Topic: custom.css not there?
I installed this theme about a month or so ago. I wanted to increase the font size for content, but the custom.css file is not in the editor. I can’t find it anywhere, and but I do see it in the zipped file uploaded to WordPress for the theme. Not sure why it’s not visible.
Help!
In reply to: Enfold custom.css
I understand, how can I email you directly for privacy issues my website address, login/password to log into the site?
As a side note, I did create a class and placed it in the custom.css: .header1 {font-size:16px;} and placed the class on the particular page only after saving the class in custom.css, but that class did not get called.
Please provide with private email so I can email you directly the details to access the site.
Thank you
Hi,
You can use this
.bottom_nav_header.social_header .main_menu ul:first-child > li a {
border-right-style: solid;
border-right-width: 1px;
font-size: 15px;
}Regards,
Ismael
So I will admit to being a newb at this but I bought this theme because the support seems amazing.
Here is my website. utswihs.com. As you can see the layers look off. In the preview they look like the background is a nice box around the letters then the letters have the first letter bold and the rest of the word normal. All the letters are white.
Then you get that mess when I view the actual page.
My HTML is a paragraph
<b>I</b>nnovating
And the CSS is
background-color:rgba(0,0,0,0.5);
Also, I tried switching to span which fixes the background height to match the font size, but it also moves the text up so that it isn’t in line anymore making it very difficult to get it to look right. The first letter is also still orange.
In reply to: A few issues
Hi,
1.) Add this on your custom.css or Quick CSS
.home.archive.post-type-archive .template-shop.content.twelve.alpha.units {
width: 650px;
float: right;
clear: none;
margin-top: -90px;
}2.) Use this
body {
font-size; 15px;
}
#top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a { font-weight: inherit; text-decoration: none; color: inherit; }
h1 { font-size: 34px; line-height: 1.1em; margin-bottom: 14px;}
h2 { font-size: 28px; line-height: 1.1em; margin-bottom: 10px; }
h3 { font-size: 19px; line-height: 1.1em; margin-bottom: 8px; } /*28*/
h4 { font-size: 17px; line-height: 1.1em; margin-bottom: 4px; } /*21*/
h5 { font-size: 16px; line-height: 1.1em; } /*17*/
h6 { font-size: 14px; line-height: 1.1em; }3.) Customers are not appearing in the user are, What to check?
4.) When you insert a logo image on Enfold > Theme Options. You have the option to select the size of the image before you click the “Insert image as logo” button.
5.) Do you mean the shop category? Where do you want them to appear?
Regards,
Ismael
In reply to: Add link to icon font short code
Hi kcharity,
Here is an example:
[av_font_icon color="#8c8c8c" icon="1" size="40px" position="left" use_link="use_link" link="http://google.com" linktarget="no"]Then change the no to yes for opening in a new window.
Regards,
Devin
How do you change the font size when you are using the header with the bottom navigation? The CSS you recommended only works on the header where the nav menu is in line with the site logo.
Hi,
I would like to use the cross-domain tracking code from Google Analytics (https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSite)
I was wondering how I can insert the code for the external link in the following 2 situations:
1) Using a button
Current code:
[av_button label='Test' link='manually,http://www.test12345.nl/' link_target='' color='custom' custom_bg='#FAAB45' custom_font='#ffffff' size='medium' position='under' icon_select='no' icon='25']
2) In the main navigation / menu for one of the items/link. This link should also open in a new window
So following the instructions of Google, I need to add somehow the following code:
<a href=”http://www.test12345.nl”
onclick=”_gaq.push(); return false;”>
Test
Many thanks in advance!
In reply to: Increase text size and alter contact form
Hi,
Sorry for the delay. This css code will make phone number red and bigger., please add it to /css/custom.css file OR to quick css located in Enfold > Layout Styling (under theme options):
.social_header .phone-info {
color: #F00;
font-size: 1.35em;
}Add this css code to one of the two locations described by me earlier in this post. It will shrink your form
.ajax_form p {
float: none;
width: 70%;
}
#top .ajax_form .text_input, #top .ajax_form .select{
padding: 8px !important;
}
#top .ajax_form .text_area{
padding: 6px !important;
height: 100px;
}Thanks,
Nick
In reply to: Two questions about fonts
1) See https://kriesi.at/support/topic/custom-font-with-cyrillic-symbols – you can add a new font or overwrite an existing font – a list of all supported fonts can be found in wp-contentthemesenfoldincludesadminregister-admin-options.php
'Alice'=>'Alice',
'Allerta'=>'Allerta',
'Arvo'=>'Arvo',
'Antic'=>'Antic',
'Bangers'=>'Bangers',
'Bitter'=>'Bitter',
'Cabin'=>'Cabin',
'Cardo'=>'Cardo',
'Carme'=>'Carme',
'Coda'=>'Coda',
'Coustard'=>'Coustard',
'Gruppo'=>'Gruppo',
'Damion'=>'Damion',
'Dancing Script'=>'Dancing Script',
'Droid Sans'=>'Droid Sans',
'Droid Serif'=>'Droid Serif',
'EB Garamond'=>'EB Garamond',
'Fjord One'=>'Fjord One',
'Inconsolata'=>'Inconsolata',
'Josefin Sans' => 'Josefin Sans',
'Josefin Slab'=>'Josefin Slab',
'Kameron'=>'Kameron',
'Kreon'=>'Kreon',
'Lobster'=>'Lobster',
'League Script'=>'League Script',
'Mate SC'=>'Mate SC',
'Mako'=>'Mako',
'Merriweather'=>'Merriweather',
'Metrophobic'=>'Metrophobic',
'Molengo'=>'Molengo',
'Muli'=>'Muli',
'Nobile'=>'Nobile',
'News Cycle'=>'News Cycle',
'Open Sans'=>'Open Sans:400,600',
'Orbitron'=>'Orbitron',
'Oswald'=>'Oswald',
'Pacifico'=>'Pacifico',
'Poly'=>'Poly',
'Podkova'=>'Podkova',
'PT Sans'=>'PT Sans',
'Quattrocento'=>'Quattrocento',
'Questrial'=>'Questrial',
'Quicksand'=>'Quicksand',
'Raleway'=>'Raleway',
'Salsa'=>'Salsa',
'Sunshiney'=>'Sunshiney',
'Signika Negative'=>'Signika Negative',
'Tangerine'=>'Tangerine',
'Terminal Dosis'=>'Terminal Dosis',
'Tenor Sans'=>'Tenor Sans',
'Varela Round'=>'Varela Round',
'Yellowtail'=>'Yellowtail',Eg if you want to use Open Sans with Cyrillic characters add following code to the bottom of functions.php:
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Open Sans'] = 'Open Sans:400,700,400italic,700italic&subset=cyrillic';
return $fonts;
}
add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Open Sans'] = 'Open Sans:400,700,400italic,700italic&subset=cyrillic';
return $fonts;
}2) To change the body font size insert following code into the quick css field and change the font size/line height value:
body {
font: 13px/1.65em "HelveticaNeue", "Helvetica Neue",Helvetica,Arial,sans-serif;
}The first value is the font size, the second value the line height.
You can change the headline sizes with
h1 { font-size: 34px; line-height: 1.1em; margin-bottom: 14px;}
h2 { font-size: 28px; line-height: 1.1em; margin-bottom: 10px; }
h3 { font-size: 19px; line-height: 1.1em; margin-bottom: 8px; } /*28*/
h4 { font-size: 17px; line-height: 1.1em; margin-bottom: 4px; } /*21*/
h5 { font-size: 16px; line-height: 1.1em; } /*17*/
h6 { font-size: 14px; line-height: 1.1em; }I see the shortcode as:
[av_font_icon color="" icon="221" size="40px" position="left" use_link="{{use_link}}" link="" linktarget="no"]How do I use this so I can insert the link to a URL both internal and external? The layout editor doens’t give a link option.
Topic: Enfold custom.css
Hi,
As you’ve mentioned in your WordPress theme, Enfold>Styling tab>Quick CSS note, user can add his own configuration to override them on theme defaults. And for a complete change he can use custom.css file. I trying to override my configuration but till now no success. I want to change the font size of headers (h1 and h2) on my all pages plus lots of other changes. Is there anything else that has to be done in order to make it work? Or is there any kind of syntax that has to be met?
Thanks
