I would also like to change the size of the font inside the tab
Hey crevlon!
1) Verwende folgenden CSS Code
#top .avia-button-row .avia-button-wrap .avia-button {
font-size: 20px;
}
2) Verwende folgenden CSS Code
.pricing-table .first-table-item {
color: #ff0000;
}
3) Hinter dem Wert (zB 20, 30, etc) füge diesen Code ein:
<span class="currency-symbol">$</span>
und tausche das $ Zeichen gegen dein Währungssymbol aus.
Cheers!
Peter
Aloha,
I’ve changed the size of the font for the tabs on the left had side (see: http://new.cultivatedesign.ca/design-landscaping-services/) – but you’ll notice that the positioning of the icons vs. the text is a bit off.
Can the font size for each be set separately?
Thanks!
Drew
Absolutely perfect! Many thanks!
Hi lunchforone!
Please add following code to Quick CSS in Enfold theme options under Styling tab
1-
.bottom_nav_header.social_header #header_main .container {
height: 165px; }
#top .social_bookmarks li a { font-size: 18px; }
2- Please refer to my post here https://kriesi.at/support/topic/remove-alternate-content-area/#post-218971
3-
.single-post .big-preview.single-big { display: none; }
4- Please refer to my post here https://kriesi.at/support/topic/footer-socket-question/#post-193649
Best regards,
Yigit
Hi!
Please add following code to Quick CSS as well
.social_header .phone-info { font-size: 16px; }
#top .social_bookmarks li a { font-size: 17px; }
.content { padding-top: 10px; }
What type of header are you using? You can post the link to your website or check it in Enfold theme options > Header tab
Regards,
Yigit
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!
Devin:
You guys are absolutely fantastic at how fast you respond to inquiries!
Your code worked perfectly! Many thanks.
Now I need a little more help.
Can you look at the following screenshot and tell me if you can help me make the changes shown?
http://prntscr.com/2q1cv1
Thank you,
Dan
Hi Dan!
You shouldn’t ever modify the theme css files directly to make any changes. Instead, add your css to the Quick CSS field in the theme’s styling tab or the custom.css file in the css folder.
For this it would be something like:
#top .entry-content-wrapper h1 {
font-size: 18px;
}
And then the same for each. The #top id gives it higher priority and the .entry-content-wrapper keeps inside that class.
Regards,
Devin
Hey!
@rodarialtda It seems like you have already started a new topic with your question. So i am closing this one. Glad Ismael could help!
Best regards,
Yigit
Could you please help me and tell me where in the layout.css file I can change the font size for the H1, H2, H3 and H4 tags?
Many thanks!
Dan
Here is the link: http://chattanoogadentistfinder.com
And I put that code in the enfold quick css area and it didn’t work, so I even upped the font size that was in the code-and still nothing…?
Hey!
1) Yes, add this to your Quick CSS in the styling tab of the theme options and modify as needed:
#top.home #fullscreen_slider_0 .avia-caption-title {
font-size: 35px;
}
#top.home #fullscreen_slider_0 .avia-slideshow-button {
font-size: 15px;
}
#top.home #fullscreen_slider_0 .avia-caption-content {
font-size: 15px;
}
2) No, that isn’t doable without customization of the element or maybe some other very creative css/html combination.
3) In the theme files open js>avia.js and look for the avia_header_size function starting at around line 1288. Inside of it you can change the math from divide the size by 2 to a smaller number to decrease how much it shrinks:
if(st < el_height/2)
{
newH = el_height - st;
header.removeClass('header-scrolled');
}
else
{
newH = el_height/2;
header.addClass('header-scrolled');
}
4) You can use:
.social_header .phone-info span {
font-size: 14px;
}
and you will need to make the number a link in the field where you’ve added it to the theme options. Ex: <a href="tel:+15555551212">555-555-1212</a>
5) I think you mean this character | which is just above the enter key on most keyboards (shift+ that key).
If you have any other questions make a new topic and we’ll do our best to answer.
Regards,
Devin
Dear, as I can center a tab within a page
Thanks for the response.
I tried the code below but there was no change.
#menu a{
color:#ffffff;
font-size:13px;
font-family: ‘Oswald’, arial, sans-serif;
text-decoration:none;
word-wrap:break-word;
}
#menu ul {
list-style-type:none;
}
#menu{
height:15px;
width:680px;
float:right;
}
#menu ul{
margin-left:0px;
padding:0px;
position:absolute;
line-height:50px;
z-index:500;
}
#menu ul a{
float:left;
display:block;
padding:5px 20px 5px 20px;
line-height:35px;
z-index:500;
margin-top:-5px;
}
#menu ul li{
float:left;
position:relative;
padding-bottom:0px;
z-index:20;
margin-left:20px;
margin-right:20px;
}
#menu ul ul{
display:none;
margin:0px 0px 0px 0px;
top:40px;
left:0px;
width:160px;
}
#menu ul ul a{
margin:0px;
line-height:22px;
}
#menu ul li li{
margin:0px;
width:160px;
}
#menu ul ul ul{
top:auto;
padding-top:10px;
padding-bottom:10px;
}
#menu ul li ul a{
float:left;
width:120px;
}
#menu ul li ul ul{
top:0px;
left:162px;
}
#menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul { display:none; }
#menu ul li:hover ul, #menu ul li li:hover ul, #menu ul li li li:hover ul, #menu ul li li li li:hover ul { display:block; }
Good morning.
I need help centering, font size, font color a TAB and Masonry Fullwidth Gallery.
The idea is to have focused on a page
Thank you.
can I change the background color for mobile sizes with that as well?
Hey juliusvandelaar!
Please add following code to Quick CSS in Enfold theme options under Styling tab
<code<.main_menu ul:first-child > li > a { font-size: 15px; font-family: "Times New Roman",Georgia,serif; }
I am not sure if i understood your second question clearly. Can you post a screenshot and show?
Cheers!
Yigit
Hey JavaLavaJoe!
Add this on Quick CSS or custom.css:
.avia-button.avia-size-large {
padding: 15px 30px 13px;
font-size: 13px;
min-width: 183px;
}
Cheers!
Ismael
Hey Munford!
You can use this:
.js_active .tab {
font-size: 14px;
}
.js_active .active_tab {
font-weight: bold;
}
Cheers!
Ismael
Hi erickeith9!
You can use this on Quick CSS or custom.css to modify the forms:
#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 {
-webkit-appearance: none;
border: 1px solid #e1e1e1;
padding: 8px 6px;
outline: none;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
border-radius: 0px;
}
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
width: 100%;
margin-bottom: 0;
display: inline;
min-width: 100px;
padding: 13px;
border-radius: 2px;
}
Please give us a link to the page with the gravity form plugin.
Regards,
Ismael
Hey!
Try adding this code to the Quick CSS:
.social_bookmarks a {
font-size: 20px !important;
}
Change as pleased.
Cheers!
Josue
I am using gravity forms and I would like the boxes to be bigger with enfold. I would also like the fonts to be bigger.
How can I do this?
-
This topic was modified 12 years, 2 months ago by
erickeith9.
HI
I am working with tabs and noticed the background of the titles changes color on responsive sizes. I know it’s getting the color from the theme, but how do I just changes it for the tabs?
also, I am trying to increase the size of the font in the tab titles with this:
.tab_titles {
font-size: 14px;
font-weight: bold;
}
but it doesn’t seem to do the trick.
help! thanks
-
This topic was modified 12 years, 2 months ago by
Munford.
Hi!
I have updated the code i posted in my previous post and added !important rule to force it. please try it now
Cheers!
Yigit
Just some short questions regarding the header. How do I change the font and the font size of the header? And how can I change the position of the header? I’d like to move the header to a different place on the homepage from top of the page to the middle or the bottom of the homepage. Could you please give me any advice?
This reply has been marked as private.
Hi Yigit,
Sorry that didn’t work. Any suggestions?
Though the site is live, with many mentions of the beautiful theme from our users, there are two things I’d like to fix dealing with Mobile devices. Can you please help me with this?
You can find the website at this link: http://bit.ly/1fqPkFc
1- The Reserve Now button is placed arbitrarily on normal view and iPhone (480px), but not for tablet displays where it tends to stack on the social media icons (the phone number is doing the same thing on tablets, so I added the code below for that as well. Is there a fix for this? I tried using the same code as I did with the smartphone but with 768px. That did not work. Here’s the code that worked for the first 2 devices.
/* Add Reserve Now button to Header-added code to header.php*/
.header-button {
position: absolute;
border: none;
top: 0;
left: 255px;
right: 180px;
}
.header_color .header-button a {
display: block;
padding: 2px 5px 10px 12px;
font-size: 22px;
text-align:justify;
font-weight: bold;
float: left;
color: #f8d699;
border-radius:0px 0px 15px 15px;
}
.header-button a.header-chat { background-color: #985e06; left center no-repeat; }
.header-button a.header-chat {link: href=”http://reservation.worldweb.com/hotel/1227″ target=”_blank” }
}
/* Get Reserve Now button on iPhone*/
@media only screen and (max-width: 480px) {
.header-button {
position:absolute;
top:90px;
left:30px;
right:20px;
}
}
/* Sizes/styles phone#, */
#top .social_bookmarks li a { font-size: 18px; }
.social_header .phone-info span {
font-size: 18px;
color: #f8d699;
font-style: italic;
padding-right: 28px;}
}
2- We alternately use 2 of 3 layer sliders, but want NONE of them to show on smartphones. Just using the first bit of code stopped the #10 slider from being displayed, but using the same code with the different variables did not. I also tried using ‘all’ in place of the numbers, but that didn’t work either.
How do I repress all of the layer sliders on smartphones?
/* Remove Layer Slider on Smartphone*/
@media only screen and (max-width: 480px) {
/* Add your Mobile Styles here */
#layerslider_10 {
display: none!important; }
}
/* Remove Layer Slider on Smartphone*/
@media only screen and (max-width: 480px) {
/* Add your Mobile Styles here */
#layerslider_18 {
display: none!important; }
}
/* Remove Layer Slider on Smartphone*/
@media only screen and (max-width: 480px) {
/* Add your Mobile Styles here */
#layerslider_19 {
display: none!important; }
}