Search Results for 'css'

Hello,

The menu arrows were added with fonts, not icons. In order to change the graphic you need to install the font awesome plugin. Then you can use this css:
ul.sf-js-enabled > li > a > i.td-icon-menu-down:before{
content: '\f0d7' !important;
font: normal normal normal 17px/1 FontAwesome;

.sf-menu .td-icon-menu-down {
margin-top: -8px!important;
}
result:http://screencast.com/t/qbxgm7rn
For a SEO plugin we recommend the SEO YOAST plugin.
http://screencast.com/t/M02oZTexcr
Thank you!

Hi FrozenGod,

You can try the code below if you want to give some style to your post pagination. Place the code in your Theme panel->Custom Css area, like this: http://screencast.com/t/KUAvmUAqtv

First of all, you have to create a class for Prev/Next pagination like this: http://screencast.com/t/sbIiL1GEIf

.next {
width: 70px;
height: 70px;
background-image: url("http://blafi.com/blafibutton.jpg");
background-size: 70px;
background-repeat: no-repeat;
vertical-align: middle;
color:black;
font-size:13px;
font-weight:bold;
}
.prev {
width: 70px;
height: 70px;
background-image: url("https://pixabay.com/static/uploads/photo/2014/04/02/10/55/arrow-304924_960_720.png");
background-size: 70px;
background-repeat: no-repeat;
vertical-align: middle;
color:black;
font-size:13px;
font-weight:bold;
}


The result you should see here: http://screencast.com/t/qHypUmv7BF .

Above, I have tried to show you an example how to give a style for your pagination button. Also, you can adjust the values as you wish until you achieve what you want. If you do not aware the steps you will follow, please consider to hire a developer/freelancer to do this thing for you, because this feature required custom work and we do not provide this for the moment, sorry!

I hope this helps and let us know how it goes!

Thank you!

Hello,

It can be done with custom css like so:
@media (max-width:767px){
.td-related-row .td-related-span4{
width:100%!important;
}
.td-related-span4 img {
width: 100%;
}
}
But this will stretch the image thumb and the images will lose a bit of their quality: http://screencast.com/t/Kmi2ruPLTf
This is because the thumb used is smaller and the image is stretched.
In order to change the default thumbnail used you can change it here: http://screencast.com/t/P4WA5KmIP
The defined thumbnails can be found here: http://screencast.com/t/hFMDEMrO

Thank you!

Hello,

1) the top bar was hidden by default in the mobile menu. You can activate it by using custom css:
@media (max-width: 767px){
.td-header-top-menu-full {
display: block !important;
}
.td-header-sp-top-menu {
display: block!important;
}
.menu-top-container {
display: none !important;
}
}
This code will provide this result: http://screencast.com/t/jxljko5scU8T

2)I do not understand your issue. i assume you are talking about the loading effect of images. The lazyload animation can be deactivated from here: http://screencast.com/t/5i5me0oPV

Thank you!

Hello,

You simply need to change the div positioning to absolute and then adjust the left/top proprieties: http://screencast.com/t/P9BPt9Tluk
#div-gpt-ad-tower-left{
position:absolute;
left:280px;
top: 295px;
}
If you want this to be a floating ad you can set the position to fixed so it will scroll with the content.
You can read more about css positioning here: http://www.w3schools.com/css/css_positioning.asp

Thanks.

Hi john80,

For make this changes, it is necessary to use a bit of Css. To add a border before the text you have to use border-top and after the text, border-bottom. Now, depends where exactly you want to add this line because are more possibilities, as example: only for p or h1,h2,h,3,… Below i gave you an example how to add a line before and after a h3 tag, like this: http://screencast.com/t/NSdbRdyY . Please try the code below and adjust them as you like. The code have to insert in your Theme panel->Custom Css area, like this: http://screencast.com/t/T816pKfVG

.td-post-content h3{
border-bottom:1px solid black;
border-top:1px solid red;
}

If is not what you mean, please provide more details.

Hope this helps and let us know how it goes!

Thank you!

Hi bauzival,

Please try the code below and place it in Theme panel->Custom Css area, like this: http://screencast.com/t/ZzKoy5Y4

.td_module_7 .entry-title a {
color:#81d742;
}

The result you should see here: http://screencast.com/t/syCQkpAay

Notice: You should have the same color with the color of the block title and practically the hover effect will disappear for this module.

Hope this helps and let us know how it goes!

Thank you!

Hello,
Unfortunately there is no option for this in the theme but it can be done with a bit of customization.
You can hide the other review scores with css in order to just display the overall score:
before: http://screencast.com/t/j0lEQc3x
after: http://screencast.com/t/zH23QN8DuqG2
Use this code in the theme panel->custom css box:
.td-review-row-stars{
display:none!important;
}
As for the position you will nedd to edit the theme files to move the reviews.
Edit the loop-single_x.php template you use on your post. (you will need to edit every template you use on your posts http://screencast.com/t/gNewwrcmEQ3q)
Modify the template you use like so: http://screencast.com/t/CcMkeJjJ

Thank you!

Hi Arafat,

The easiest way to achieve this is by using a plugin. Something like: https://wordpress.org/plugins/last-updated/screenshots/
We have not tested these plugins. Some of them might not work with our theme. Try a few of them out and see how they work.

The alternative involves coding:
Use this code http://pastebin.com/vCsS4CFf

And add it to the loop-single or single_template file corresponding to your post template: http://screencast.com/t/35I4CepLEU and replace the get_date code with the one above: http://screencast.com/t/THPFMM9E
Result: http://screencast.com/t/t7sLh9Vdt
You can read more about it here: http://wpcrux.com/wordpress-last-modified-date/

Also you can use the code below to make a style for your modification

.td-module-meta-info {
display:inline-flex;
}
.the-modified-date {
padding-left:5px;
padding-right:10px;
padding-top:2px;
}
.td-post-comments {
display:none!important;
}

The result you should see here: http://screencast.com/t/SiGBizjach0v .

Hope this helps and let us know how it goes!

Thank you!

Hello,
Unfortunately this customization requires a bit of work. The theme was built to work with 3 columns. Each of these columns has a width of 33.3% of the screen. If you decrease the width on one of these columns, the layout will be broken. Change one element and others will be affected by this change so you will have to change their width as well and adjust the positioning. Unfortunately it is not an easy task and we do not recommend it.
You can set a sidebar for each of your pages by either selecting a sidebar: http://screencast.com/t/pQwcTvsVX, or creating one in the page with visual composer: http://screencast.com/t/ZgKggOEc
The slider you mentioned is a plugin and it is not tested to work with the theme.
you can use this custom css to make it fall behinf the menu:
#advps_container1{
z-index:0!important;
}
Thank you!

Hi jsup,

Our theme has not been designed to show Sign in/Log in on mobile version. Please try the code below to fix it in your mobile side. Place the code in Theme panel->Custom Css area, like this: http://screencast.com/t/BzV7Wpof

@media (max-width: 767px){
.td-header-top-menu {
display: block!important;
}
.td-header-sp-top-menu .td_data_time, .td-header-sp-top-menu .menu-top-container, .td-header-style-1 .td-header-sp-top-widget{
display: none;
}
.td-header-sp-top-menu{
display: table!important;
margin-left: auto;
margin-right: auto;
float: none!important;
}
}

The result you should see here: http://screencast.com/t/rmHYIJX9zh

Hope this helps and let us know how it goes!

Thank you!