- This topic has 6 replies, 2 voices, and was last updated 5 years, 10 months ago by
sapana.
-
AuthorPosts
-
November 4, 2018 at 5:35 pm #158496
senakurkcuoglu
Participanthi;
i try to add effect header image. can you help me?November 4, 2018 at 10:42 pm #158507sapana
Participant@senakurkcuoglu: Go to=> Appearance=> Customize=>Header Media=>Header Image=> Select the Add New Image
Let me know if this helps you out!Kind Regards,
SapanaNovember 5, 2018 at 6:46 am #158575senakurkcuoglu
ParticipantHello there;
I’m adding new photos, but I can’t change the style of the photo. I can’t do things like add a black-and-white effect. I can also reduce the height of the main menu and find the code that I can play with the size of the menu posts. I’m a novice so I’d appreciate it if you could help.November 6, 2018 at 12:12 am #158635sapana
Participant@senakurkcuoglu: You can add the filter to add those effect. Please post your in site url so that I can look into those issue and provide you the possible solution.
Kind Regards,
SapanaNovember 6, 2018 at 12:42 pm #158694senakurkcuoglu
ParticipantIn fact, I’m very inadequate in many things. For example, futured contents push the read more button to your home page and not to its own page. I’m very missing and I have to do it fast but I’m too foreign.
November 7, 2018 at 8:23 am #158745senakurkcuoglu
Participant$black-100: rgba(0,0,0,1);
$black-90: rgba(0,0,0,0.9);
$black-80: rgba(0,0,0,0.8);
$black-70: rgba(0,0,0,0.7);
$black-60: rgba(0,0,0,0.6);
$black-50: rgba(0,0,0,0.5);
$black-40: rgba(0,0,0,0.4);
$black-30: rgba(0,0,0,0.3);
$black-20: rgba(0,0,0,0.2);
$black-10: rgba(0,0,0,0.1);$white-100: rgba(255,255,255,1);
$white-90: rgba(255,255,255,0.9);
$white-80: rgba(255,255,255,0.8);
$white-70: rgba(255,255,255,0.7);
$white-60: rgba(255,255,255,0.6);
$white-50: rgba(255,255,255,0.5);
$white-40: rgba(255,255,255,0.4);
$white-30: rgba(255,255,255,0.3);
$white-20: rgba(255,255,255,0.2);
$white-10: rgba(255,255,255,0.1);//Invisible
$transparent: rgba(255,255,255,0);//COLORS
$light-grey: #e0dfe1;
$light-grey-A: #f0f0f0;
$grey: #9f9e9f;
$dark-grey: #222222;
$white: #ffffff;
$blue: #0190ec;//BMW
$light-blue: #6295ca;
$dark-blue: #13274c;
$red: #d1253b;//ANIMATIONS stuff
$hover: all 0.2s ease-in;
$slide: all 0.3s cubic-bezier(.55,0,.1,1);
$slide-delay: all 0.4s 0.1s cubic-bezier(.55,0,.1,1);
$slide-slow: all 0.5s cubic-bezier(.55,0,.1,1);
$zoom: all 1s cubic-bezier(.55,0,.1,1);
$zoom-slow: all 2.4s cubic-bezier(.55,0,.1,1);
//MIXINS
// ADDS A BROWSER PREFIX TO THE PROPERTY
@mixin css3-prefix($property, $value) {
-webkit-#{$property}: #{$value};
-khtml-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
// TRANSFORM
@mixin transform($params) {
@include css3-prefix(‘transform’, $params);
}
//FONT IMPORT
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);body {
background-color: lighten($dark-grey, 10%);
padding: 50px 0;
font-family: ‘Noto Sans’, sans-serif;
text-align: center;
}//
.container {
background-color: $dark-grey;
margin: 0 auto;
width: 100%;
max-width: 320px;
min-height: 568px;
margin: 0 auto;
border-radius: 8px;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0px 9px 13px 0px $black-30;
-moz-box-shadow: 0px 9px 13px 0px $black-30;
box-shadow: 0px 9px 13px 0px $black-30;
-webkit-transform: scale(1);
}.menu-trigger, .close-trigger {
position: absolute;
top: 32px;
right: 20px;
display: block;
width: 42px;
height: 42px;
cursor: pointer;
z-index: 333;&:hover {
.menu-trigger-bar {
&:before {
width: 100%;
}
}.close-trigger-bar {
&:before {
width: 100%;
}
}
}
}.close-trigger {
z-index: 5;
top: 42px;
}.menu-trigger-bar {
display: block;
width: 100%;
height: 4px;
background-color: $white-100;
margin-bottom: 6px;
transform: rotate(-45deg);
position: relative;&:before {
content: “”;
position: absolute;
top: 0;
left: 0;
display: block;
width: 0%;
height: 100%;
background-color: $black-20;
transition: $slide;
}&.top {
width: 50%;
}
&.middle {
&:before {
left: auto;
right: 0;
}
}
&.bottom {
width: 50%;
margin-left: 50%;
}
}.close-trigger-bar {
display: block;
width: 100%;
height: 4px;
background-color: $dark-grey;
position: relative;&:before {
content: “”;
position: absolute;
top: 0;
left: 0;
display: block;
width: 0%;
height: 100%;
background-color: $white-20;
transition: $slide;
}&.left {
transform: translateX(100px) translateY(-100px) rotate(-45deg);
}
&.right {
transform: translateX(-100px) translateY(-100px) rotate(45deg);
top: -3px;
}
}.logo {
display: block;
width: 64px;
height: 64px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -52px;
margin-left: -32px;
text-align: center;
z-index: 10;span {
display: block;
text-align: center;
line-height: 62px;
font-size: 72px;
color: $white-100;
}
}.logo-title {
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
color: $dark-grey;
font-size: 32px;
line-height: 82x;
}
.logo-badge {
position: absolute;
display: block;
width: 24px;
height: 24px;
top: 6px;
right: -6px;
border-radius: 100%;
background-color: $light-blue;
font-size: 12px;
line-height: 2;
text-align: center;
}.inner-container, .menu-container {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}.inner-container {
z-index: 20;
}
.menu-container {
display: flex;
align-items: center;
}
.menu {
display: block;
width: 100%;
padding: 20%;
//opacity: 0;
//visibility: hidden;li {
text-align: left;
display: block;
padding: 15px 0;
}a {
text-decoration: none;
color: $dark-grey;
display: inline-block;
padding: 10px 0;
position: relative;&:hover {
&:before {
opacity: 1;
transform: translateX(0px);
}
}&:before {
content: “”;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 18px;
height: 4px;
opacity: 0;
background-color: $dark-grey;
transform: translateX(100px);
transition: $slide;
}
}
}.menu-bg {
position: absolute;
display: block;
width: 200%;
left: -53%;
top: -25%;
//top: -25%;
height: 40%;
background-color: $white-100;&.middle {
top: 29%;
left: -53%;
transform: rotate(-45deg) scaleY(0);
}
&.top {
left: -34%;
top: 0;
transform: rotate(-45deg) translateY(-152%);
//top: -25%;
}
&.bottom {
//bottom: 0;
top: 105%;
transform: rotate(-45deg) translateY(25%);
left: -20%;
}
}#links{position:absolute;bottom:0px;left:0px;width:100%;height:50px;font-size:13px;font-family:tahoma;color:#fff;}
#links a{text-decoration:none;font-size:2.3em;color:#fff;}
#twitter{position:absolute;bottom:15px;right:20px;}
#pens{position:absolute;bottom:15px;left:20px;}How do I use this code in fullscreen theme?I want to use the mobile menu icon in computer mode.
November 12, 2018 at 1:32 am #159042sapana
Participant@senakurkcuoglu: It seems that you are using the different theme, Please post your issues and queries in the respective theme support forum.
Kind Regards,
Sapana -
AuthorPosts
- The topic ‘How do I add filters to images?’ is closed to new replies.