Hi Basilis

That’s almost there, thank you. The first and third columns are not quite what I would like, but its certainly getting there, please see the page below. I also noticed the text in the third row is darker than the text in the second and fourth rows, could these all be made the same darker text.

I’m not sure if it as any of the other CSS that may be stopping it showing as the image at the top of the page, I have included all of the CSS I Have added.

@media only screen and (max-width: 1185px) { .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
.html_mobile_menu_tablet #mobile-advanced{display:block;} }

li#menu-item-396 .avia-menu-fx, li#menu-item-397 .avia-menu-fx, li#menu-item-398 .avia-menu-fx, li#menu-item-452 .avia-menu-fx, li#menu-item-703 .avia-menu-fx, li#menu-item-712 .avia-menu-fx, li#menu-item-713 .avia-menu-fx, {
display: none;
}
.avia-menu-text img {
position: relative;
top: 10px;
}

@media screen and (max-width: 767px) {
.avia-menu-text img {
position: relative;
top: 0px !important;
}
}

@media only screen and (max-width: 768px) { .only_desktop { display: none !important; }}

@media only screen and (min-width: 769px) { .only_mobile { display: none !important; }}

.testimonial {
color: #ffffff;
font-size: 18px;
}

.testimonial2{
color: #ff4000;
font-size: 18px;
}

.font-white {
color: #ffffff;
font-size: 16px;
}

.event-date {
color: #ffffff;
font-size: 24px;
font-weight: bold;
}

.distance {
color: #ff4000;
font-size: 22px;
font-style: italic;
font-weight: bold;
}

#top .av_header_glassy.av_header_transparency #header_main {
background-color: rgba(255,255,255,0.8); }

#top div .avia-gallery img { border-style: solid; padding: 0; border-color: #cccccc;} #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 16%; margin: 0px; }

@media screen and (max-width: 767px) {
#wrap_all { position: relative !important; } }

.element-form {
text-align: left;
color: #A81010;
border-top-width: medium;
border-right-width: 0px;
border-bottom-width: medium;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #aaaaaa;
border-bottom-color: #aaaaaa;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 18px;
font-weight: bold;
text-transform: capitalize;
font-family: Open Sans, Geneva, sans-serif; }

#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 { background-color: #ffffff !important; }

th {
background: red;
color: white;
}
td.avia-center-col {
background: #E9AE4E;
}

I hope this helps.
Regards
Paul

This is because I uploaded all 6 images at the same time to Cloudup instead of individually. And it seems it gave me the same URL for each image when I hit the Share Icon. I’ll use the URL from the browser.

Look at this image. This is how enfold works by default. It doesn’t matter what the main menu colour is set to. It shows white because the transparency is set to white:
https://cloudup.com/iLpNqEII44f

Look at this image. The menu should STILL be WHITE because the transparancy is still set to white (it has not been changed). The only thing changed is the Advanced Menu Setting – Blue, Size 16, Quicksand font.
https://cloudup.com/ilypA6EU8G4

I will edit the post above with the correct image links. It’s not difficult to test this. Use your Church demo, Just change the menu colour as above in the advanced settings.

Ismael,

This is the portion of the html code of that page, including some of the code before and after the notification box:

<h2>Top of the line EPA Compliant Pressure washers</h2>
Our pressure washers are compliant with the EPA requirements for water reclamation. It is now an EPA violation for you to flush dirty water down your drains. With Chesapeake Facilities Resources your gum removal, you have the peace of mind knowing that will not be in violation of the EPA regulations regarding pressure washers.

[av_notification title='' color='red' border='solid' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='yes' icon='ue83e' font='entypo-fontello']
<h3>“Why can’t I use a water hose to remove gum?</h3>
Simply put, water hoses do not produce enough pressure to break up dried up chewing gum and separate it from your floor. To learn more about why pressure washers are necessary when cleaning your concrete surfaces, click here.
[/av_notification]

[av_hr class='invisible' height='5']
<h2>Our process</h2>
<h3>Treating</h3>

As you can see, there is no <br> tags after the [/av_notification], but there was bunch of default space there. I added [av_hr class='invisible' height='5'] to decrease that, but it didn’t work. So are you saying within the html generated by the notification box shortcode, that there are <br> tags beneath it? If so will the css you gave >>>
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
margin-top: 0;
}
Will this css only affect the placement of notification boxes via shortcode into the page, or will it also affect other page elements and/or notification boxes that are inserted via the notification content widget into the page builder?

Here are some screenshots to help:

Menu with image background (the default Church Theme)
https://cloudup.com/iLpNqEII44f

Transparent Menu Setting (White)
https://cloudup.com/ie4QqJ8CAaG

Menu shown when scrolled down the screen:
https://cloudup.com/iYFBgZGiNrQ

Now we want to change the size of the header and change the font to Qucksands and change the colour to Blue:
https://cloudup.com/id5sIw-k4Iy

It works when you scroll down the screen (as expected):
https://cloudup.com/ih0f6GmgeSR

But not on initial page load – it should be using the Transparent menu setting and it is not:
https://cloudup.com/ilypA6EU8G4

I hope this helps.
H

• This reply was modified 10 years, 4 months ago by Cliffy. Reason: Edited again with correct image links

question 2 on this website…

I am using a special heading on the homepage and want to increase the font size.
right now it has the default size of H1.

I have given it a css-class name: specialheading-font-size

I have used:
.specialheading-font-size {
font-size: 50px !important
}

and nothing happens… What am I doing wrong?

çok teşekkür ederim adaş. eklemek istediğim css dosyalarını da buraya ekliyeyim.
Vaktin olunca bakarsın. Sonradan düzenlemesini ben yaparım. Teşekkürler.

.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 70px;
	height: 30px;
	padding: 3px;
	margin:0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
    background-image: url("http://www.cagriteknoloji.com.tr/img/tr.png");
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background-image: url("img/tr.png");
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 45px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Switch Left Right
==========================*/
.switch-left-right .switch-label {
	overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
	width: 20px;
	height: 20px;
	top: 4px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 11px 0 0 0;
	text-indent: -12px;
	border-radius: 20px;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
	background-image: url("http://www.cagriteknoloji.com.tr/img/en.png");
    background-repeat: no-repeat;
	text-align: left;
    padding-left: 80px;
    width: 100%;
    left: 20px;
	opacity: 1;
}
.switch-left-right .switch-label:after {
	text-align: left;
	text-indent: -9px;
	background-image: url("http://www.cagriteknoloji.com.tr/img/tr.png");
	left: -50px;
	opacity: 1;
	width: 100%;
}

.switch-left-right .switch-input:checked ~ .switch-label:before {
	opacity: 1;
	left: 50px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
	left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
	background: inherit;
}

/* Switch Slide
==========================*/
.switch-slide {
	padding: 0;
	background: #FFF;
	border-radius: 0;
	background-image: none;
}
.switch-slide .switch-label {
	box-shadow: none;
	background: none;
	overflow: hidden;
}
.switch-slide .switch-label:after, .switch-slide .switch-label:before {
	width: 100%;
	height: 65%;
	top: 5px;
	left: 0;
	text-align: center;
	padding-top: 10%;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Transition
============================================================ */
.switch-label, .switch-handle {
	transition: All 0.2s ease;
	-webkit-transition: All 0.2s ease;
	-moz-transition: All 0.2s ease;
	-o-transition: All 0.2s ease;
}

1. Product list issue:
I installed a plugin to toggle between product grid view and list view. The list view has gotten a strange layout (image in upper left corner of the row, empty space and borders at the bottom (see attached screen shot)

2. Font size CSS-CODE works as I needed it, Thanks a lot

Hi,

this is what I did :
functions.php

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {$sub .= "<h1>NEW POINT <span class='title-red-de'>DE</span> VIEW</h1>"; return $sub;}<code>*</code>

style.css

.title-red-de  {color: #f05a1a;}
.logo img {display: none !important;}
.logo i {font-size: 14px;}
.logo .subtext {font-size: 50px; position: relative; top: 21px; color: #fff;}
.responsive #top .logo {display: block; height: 89px !important}
.responsive .logo a {display: block}*/
.header-scrolled .logo img { display: none !important; }
.responsive .logo img { display: none !important; }

I’ve tried to play with two last lines (in style.css and quick css), but it doesn’t change anything.

Here’s the result:
PC screen AND mobile screen

Is it possible to render this text shrinking like the logo ?
I’d like to enlarge the font-size for the large screens, but make it to shrink on mobile screens in order to keep in one line