Üyelik formunu daha güzel bir hale getirmek için aşağıdaki css kodunu buldum bu gibi kodları nereye yapıştırmam gerekiyor seni daha fazla rahatsız etmek istemiyorum :)
Aşağıdaki css kodunun link’i https://codepen.io/icebob/pen/LEbQVY

@import “compass/css3”;

@import url(https://fonts.googleapis.com/css?family=Dosis:300|Lato:300,400,600,700|Roboto+Condensed:300,700|Open+Sans+Condensed:300,600|Open+Sans:400,300,600,700|Maven+Pro:400,700);

@import url(‘https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’);

$textColor: White;
$greyColor: #BBB;

* {
@include box-sizing(border-box);
}

html {
background: black;
}

body {
font-family: “Open Sans”;
font-size: 16px;
color: $textColor;
font-smoothing: antialiased;
font-weight: 600;
}

a {
color: $greyColor;
}

.content:before {
content: “”;
position: fixed;
left: 0;
right: 0;
top: 0; bottom: 0;
z-index: -1;

display: block;
background-color: black;
background-image: url(‘http://ultraimg.com/images/Ho6hQWs.jpg’);
width: 100%;
height: 100%;
background-size: cover;

-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}

.content {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
width: 540px;
height: 540px;

background-color: rgba(10, 10, 10, 0.5);
margin: auto auto;
padding: 40px;

@include border-radius(4px);
@include box-shadow(0 0 10px rgba(0,0,0,1));

.title {

text-align: center;
font-size: 2.0rem;
font-weight: 600;

padding-bottom: 30px;

} // .title

input {
width: 100%;
font-size: 1.2rem;
font-family: “Open Sans”;

margin: 10px 0px;

border: none;
padding: 10px;

@include border-radius(4px);

} // input

input[type=checkbox] {
display: none;
}

label {
display: inline-block;
width: 20px;
height: 20px;

cursor: pointer;
position: relative;

margin-left: 5px;
margin-right: 10px;
top: 5px;

&:before {
content: “”;
display: inline-block;

width: 20px;
height: 20px;

@include border-radius(3px);

position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
@include box-shadow(inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8));
}
} // label

input[type=checkbox]:checked + label:before {
content: “\2713″;
@include text-shadow(1px 1px 1px rgba(0, 0, 0, .2));
font-size: 20px;
color: Black;
text-align: center;
line-height: 20px;
}

span {
font-size: 0.9rem;
}

button {
width: 100%;
font-size: 1.1rem;
padding: 10px;
margin: 20px 0px;

background-color: #66A756;
color: $textColor;
border: none;

@include border-radius(4px);
}

.social {
width: 100%;
position: relative;
overflow: hidden;
text-align: center;

span {
display: inline-block;
vertical-align: baseline;
padding: 0 20px;

&:before, &:after {
content: ”;
display: block;
width: 500px;
position: absolute;
top: 0.9em;
border-top: 1px solid $textColor;
}

&:before {
right: 75%;
}

&:after {
left: 75%;
}
}
}

.buttons {
width: 100%;
margin: 30px 0px;

button {
float: left;
width: 30%;
margin: 0px 1.5%;

i {
padding-right: 7px;
}

&.facebook {
background-color: #4464B2;
}

&.twitter {
background-color: #28A9E0;
}

&.google {
background-color: #DA4735;
}

} // button

&:after {
content: “”;
display: block;
clear: both;
}

} // .buttons

.already {
text-align: center;
font-size: 0.9rem;
}

} // .content

Hi Rikard
Thank you very much, I get it now and adjusted H1 & H2.
As a consequence, I have a problem with the font size in the mobile’s slider on the home page only (it is fine on the desktop version). When I changed the H2 to 26px, the font size in the slider became too large. When I changed it again to 18px, it was just right. How come? But I need the H2 to be 26 px and the font size in the mobile’s slider 18px. What is to do? Could you advise please.
Thanks, Franziska

Here is the combined list to make it easier. :-)

1. DESKTOP AND MOBILE HEADER & FOOTER ALIGNMENT

– The main header column got squeezed horizontally. Can you help resolve please?
– Mobile and desktop screenshots attached that headers and footers are all over and not aligned.

DESKTOP
– Header Logo is overlapping the header menus (Screenshot called Squeezed Header & Footer in below link)
– Footer also got squeezed
– You had previously added the following CSS Code to fix the same issue. ( #top #header .flex_column { width: 100%; margin-left: 0;} although it stopped working somehow.
– For the immediate fix, I added the following CSS Code: #top .container { width: 85%; max-width: none; }

MOBILE:
– The footer and related links are now also squeezed on mobile as well.
– Could you kindly help resolve?

2. COOKIE MESSAGE AND MODAL.

Could you kindly help to only show the ACCEPT and LEARN Buttons on Cookie message on load?
– The full cookie model message pops up on page load.

COOKIE MESSAGE FONT AND BUTTONS
– Small and inconsistent font style and size.(Screenshot called cookie)
– Buttons do not work
– Misaligned accept and learn more button

3. HOME PAGE ALIGNMENT

– I also added the home page id to the following code you added. The code that was added was affecting all pages.

.page-id-16071 #footer { margin-top: 365px !important;}

– I left the following two codes for the header, footer and page alignments. Not sure if it’s correct or not.

#top #header .container {
width: 85%;
max-width: none;
}
#top #header .flex_column { max-width: 100%; margin-left: 0;}

4. MENU HOVER & ACTIVE PAGE MANU COLORS
The main header menu hover color has also changed to much lighter color. It only shows the #dddddd color on active page, not on menu hover.

– Screenshot is called: Menu Hover & Active Page Hover
– Screenshot also attached.

Thank you in advance my friend and god bless you for all your help. :-)

Appreciate it my friend. It worked fantastic.

1. The main header column got squeezed horizontally. Can you help resolve please?

DESKTOP
– Header Logo is overlapping the header menus (Screenshot called Squeezed Header & Footer in below link)
– Footer also got squeezed
– You had previously added the following CSS Code to fix the same issue. ( #top #header .flex_column { width: 100%; margin-left: 0;} although it stopped working somehow.

For the immediate fix, I added the following CSS Code: #top .container { width: 85%; max-width: none; }

MOBILE:
– The footer and related links are now also squeezed on mobile as well.
– Could you kindly help resolve?

2. Cookie Message and mode.

Could you kindly help to only show the ACCEPT and LEARN Buttons on Cookie message on load?
– The full cookie model message pops up on page load.

Cookie Message fonts and buttons.
– Small and inconsistent font style and size.(Screenshot called cookie)
– Buttons do not work
– Misaligned accept and learn more button

Thanks you, kindest regards and hope you’re keeping safe.

Sorry to re-open this.

While it worked, now it is no longer working: font in menu header is no longer Lato. Could you pleas check again? Would there be any other custom CSS that interferes with the suggested CSS?

This is all the CSS I have right now:

h1, h2, h3 { text-transform: none !important; }
h2 { font-style: italic !important; }
h6 { text-shadow: 10px 10px 40px rgba(151,142,122,1); }
.title_container { display: none; }
.avia-button { font-size: 20px !important; }
#top .avia-builder-el-6 .avia-button-fullwidth { border: 1px solid #ab8e66; }
“time.slide-meta-time { display: none!important; }
.avia-content-slider-inner { height: auto!important; }”
“.mega_menu_title.heading-color.av-special-font{
font-family: Lato!important;
}”
.news-time { display: none; }

Thank you. A little follow up is needed unfortunately.

It now clearly works at the page I shared above: http://staging.lysandro.nl/test-team-kriesi/
It shows exactly what I need (button 2).

However I now implemented this on the home page, and there it is not showing up the way it should (the middle button), see here:

http://staging.lysandro.nl/#afspraak
The middle button still does not show the border.

Thank you again for checking!

PS: there is not much custom CSS on the site, just in case you need it, here is all the CSS I have active currently:
h1, h2, h3 { text-transform: none !important; }
h2 { font-style: italic !important; }
h6 { text-shadow: 10px 10px 40px rgba(151,142,122,1); }
.title_container { display: none; }
.avia-button { font-size: 20px !important; }
#top .avia-builder-el-6 .avia-button-fullwidth { border: 1px solid #ab8e66; }
“time.slide-meta-time { display: none!important; }
.avia-content-slider-inner { height: auto!important; }”
“.mega_menu_title.heading-color.av-special-font{
font-family: Lato!important;
}”
.news-time { display: none; }

• This reply was modified 5 years, 4 months ago by emielvanwegen. Reason: It looked to work, but then it was not working on all pages

Rikard,

I changed that to an H1 as we discussed. I wanted to include a screen shot I took from Bing. It tells me I have two instances of having an H1 on the home page of NaturalStressManagement.com So I’m getting conflicting data. You spotted how I was missing the H1 but Bing says (see screenshot) I have an issue.

Can you tell me how to proceed?

Didn’t know how to get you a screen shot but here is the Bing/Home page data below I cut pasted

–></head><body id=”top” class=”home page-template-default page page-id-5477 rtl_columns stretched lato theme-enfold woocommerce-no-js avia-woocommerce-30″ itemscope=”itemscope” itemtype=”https://schema.org/WebPage&#8221; ><div class=’av-siteloader-wrap av-transition-enabled av-transition-with-logo’><div class=’av-siteloader-inner’><div class=’av-siteloader-cell’><div class=’av-siteloader’><div class=’av-siteloader-extra’></div></div></div></div></div><div id=’wrap_all’><header id=’header’ class=’all_colors header_color dark_bg_color av_header_top av_logo_left av_main_nav_header av_menu_right av_custom av_header_sticky_disabled av_header_shrinking_disabled av_header_stretch_disabled av_mobile_menu_phone av_header_searchicon_disabled av_header_unstick_top av_minimal_header av_bottom_nav_disabled av_alternate_logo_active av_header_border_disabled’ role=”banner” itemscope=”itemscope” itemtype=”https://schema.org/WPHeader&#8221; ><div id=’header_meta’ class=’container_wrap container_wrap_meta av_icon_active_left av_extra_header_active av_secondary_right av_phone_active_right av_entry_id_5477′><div class=’container’><ul class=’noLightbox social_bookmarks icon_count_6′><li class=’social_bookmarks_twitter av-social-link-twitter social_icon_1′><span class=’avia_hidden_link_text’>Twitter</span><li class=’social_bookmarks_facebook av-social-link-facebook social_icon_2′><span class=’avia_hidden_link_text’>Facebook</span><li class=’social_bookmarks_linkedin av-social-link-linkedin social_icon_3′><span class=’avia_hidden_link_text’>LinkedIn</span><li class=’social_bookmarks_pinterest av-social-link-pinterest social_icon_4′><span class=’avia_hidden_link_text’>Pinterest</span><li class=’social_bookmarks_youtube av-social-link-youtube social_icon_5′><span class=’avia_hidden_link_text’>Youtube</span><li class=’social_bookmarks_instagram av-social-link-instagram social_icon_6′><span class=’avia_hidden_link_text’>Instagram</span><div class=’phone-info ‘><span><h3>Call Mateja 561 299 1028</h3></span></div></div></div><div id=’header_main’ class=’container_wrap container_wrap_logo’><ul class = ‘menu-item cart_dropdown ‘ data-success=’was added to the cart’><li class=’cart_dropdown_first’><span aria-hidden=’true’ data-av_icon=’’ data-av_iconfont=’entypo-fontello’></span><span class=’av-cart-counter ‘>0</span><span class=’avia_hidden_link_text’>Shopping Cart</span><!–<span class=’cart_subtotal’><span class=”woocommerce-Price-amount amount”><bdi><span class=”woocommerce-Price-currencySymbol”>$</span>0.00</bdi></span></span>–><div class=’dropdown_widget dropdown_widget_cart’><div class=’avia-arrow’></div><div class=”widget_shopping_cart_content”></div></div><div class=’container av-logo-container’><div class=’inner-container’><span class=’logo’></span><nav class=’main_menu’ data-selectname=’Select a page’ role=”navigation” itemscope=”itemscope” itemtype=”https://schema.org/SiteNavigationElement&#8221; ><div class=”avia-menu av-main-nav-wrap”><ul id=”avia-menu” class=”menu av-main-nav”><li id=”menu-item-255″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-1″><span class=”avia-bullet”></span><span class=”avia-menu-text”>About Mateja</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”><span class=”avia-arrow”></span></span></span><ul class=”sub-menu”><li id=”menu-item-54″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Why Mateja Petje</span><li id=”menu-item-246″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Mateja Petje Background</span><li id=”menu-item-244″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Philosophy & Approach</span><li id=”menu-item-57″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Mateja Petje Media Interviews</span><li id=”menu-item-52″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-2″><span class=”avia-bullet”></span><span class=”avia-menu-text”>Services</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”><span class=”avia-arrow”></span></span></span><ul class=”sub-menu”><li id=”menu-item-240″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Holistic Psychotherapy Mateja Petje</span><li id=”menu-item-241″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Stress Management Coaching</span><li id=”menu-item-3155″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Mateja Petje Coaching Packages</span><li id=”menu-item-56″ class=”menu-item menu-item-type-post_type menu-item-object-page”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Energy Healing-Spiritual Counseling</span><li id=”menu-item-237″ class=”menu-item menu-item-type-post_type menu-item-object-page av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-3″><span class=”avia-bullet”></span><span class=”avia-menu-text”>Testimonials</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”><span class=”avia-arrow”></span></span></span><li id=”menu-item-236″ class=”menu-item menu-item-type-post_type menu-item-object-page av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-4″><span class=”avia-bullet”></span><span class=”avia-menu-text”>Mateja Petje Client Resources</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”><span class=”avia-arrow”></span></span></span><li id=”menu-item-39″ class=”menu-item menu-item-type-post_type menu-item-object-page av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-5″><span class=”avia-bullet”></span><span class=”avia-menu-text”>Blog</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”><span class=”avia-arrow”></span></span></span><li id=”menu-item-55″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-6″><span class=”avia-bullet”></span><span class=”avia-menu-text”>Contact Mateja Petje</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”><span class=”avia-arrow”></span></span></span><ul class=”sub-menu”><li id=”menu-item-301″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy”><span class=”avia-bullet”></span><span class=”avia-menu-text”>Opt In for Free Videos-Privacy Policy</span><li class=”av-burger-menu-main menu-item-avia-special “> <span class=”av-hamburger av-hamburger–spin av-js-hamburger”> <span class=”av-hamburger-box”> <span class=”av-hamburger-inner”></span> Menu </span> </span> <span class=”avia_hidden_link_text”>Menu</span> </div></nav></div></div> <!– end container_wrap–></div><div class=’header_bg’></div> <!– end header –></header><div id=’main’ class=’all_colors’ data-scroll-offset=’0′><div class=’stretch_full container_wrap alternate_color light_bg_color title_container’><div class=’container’><h1 class=’main-title entry-title ‘>Home</h1><div class=”breadcrumb breadcrumbs avia-breadcrumbs”><div class=”breadcrumb-trail” ><span class=”trail-before”><span class=”breadcrumb-title”>You are here:</span></span> <span class=”trail-end”>Home</span></div></div></div></div><div class=’main_color container_wrap_first container_wrap fullsize’ style=’ ‘ ><div class=’container’ ><main role=”main” itemprop=”mainContentOfPage” class=’template-page content av-content-full alpha units’><div class=’post-entry post-entry-type-page post-entry-5477′><div class=’entry-content-wrapper clearfix’><div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-0 el_before_av_one_half avia-builder-el-first ” style=’border-radius:0px; ‘><section class=”av_textblock_section ” itemscope=”itemscope” itemtype=”https://schema.org/Creati