Search Results for 'browser inspector'

Hi,

Each demo has it’s own style that is custom made for it. However it is entirely possible to recreate it.
The homepage is a a page created in Visual composer with the following elements that you mention
The Must read section is block 5 on a full row
– https://www.screencast.com/t/kXGPxTa3
The Fashion section is block 11 on 2 columns
– https://www.screencast.com/t/OXy1v5Yki8HQ
The Latest articles is block 9 on 2 columns
– https://www.screencast.com/t/42gPr5neIZRm
All the font properties for these elements can be modified as well, in the theme panel
– https://forum.tagdiv.com/font-customization/
You can see all the available blocks in different layouts here
– https://demo.tagdiv.com/newspaper/block-1/
You can use the browser inspector tool to identify the elements used on the page. Here is a guide to help you
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

You could modify the margin, padding or other properties and reduce them
– https://www.screencast.com/t/vIYztxxWNYJ
Or even set a negative top margin with the value you want
– https://www.screencast.com/t/0UDNZpnrboPm
I tried accessing your website but it seems to be in maintenance. You could try to create a code that you can use in the theme panel. Here is a link to a guide explaining how to use the browser inspector to identify the elements on the page and their classes – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
You can test different modifications live and see how they will look on your website.

Thanks

Hello modaestrat,

1,3)Using the post ID for your desired post, you can hide the related articles and author box for this post. Try the code below and place it in Theme panel->Custom CSS area.

The code is ->

.postid-380 .author-box-wrap, .td_block_related_posts {
display:none;
}

The result is here -> https://www.screencast.com/t/tnSmf1IwoG

5)Notice that the category tags for Related Articles should have to be enabled from Theme panel->Block Settings ->Category Tag on Modules/Blocks, like this -> https://www.screencast.com/t/NsO1MhdZsTc Then if you want to display the meta info container (author, date, and comments counter) you should make some changes in order to achieve this, like this -> https://www.screencast.com/t/pLXvabdP1tA and then use a bit of CSS code to adjust these details, like this -> https://www.screencast.com/t/zjHZlHbsOjo6

The code is ->

.td_module_related_posts .td-module-title{
margin-bottom:2px;
}

If the future, if you want to make your design, you will have to consult our useful guide here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ because there you will find the method by which you can create your custom code yourself.

Hope this helps!

Thanks for the message!

Hi,

You can use the Advanced Css fields available in the theme panel – https://www.screencast.com/t/ltTmlleFr
There you could enter your custom code based on the different device selection. For example if you would like to change the block title font size on phones, you could do it like this
– https://www.screencast.com/t/SbPpRNqBH
You can identify the text or element you want to customize using the browser inspector
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Then you can create custom code and enter it in the theme panel, in order to make these modifications.

Thanks

Hi,

I see that you have managed to change the post title font – https://www.screencast.com/t/Oa5ebwRfunk
If you are not using the mobile theme you can change the font using the theme settings, and they will display on mobile devices as well. Or you can use the theme advanced custom Css sections and create code based on the different screen sizes – https://www.screencast.com/t/NbtZvusjUSFi
For example if you want to change the post title on phones you could do it like this
– https://www.screencast.com/t/AarCDWczjB0
If you decide to use the mobile theme plugin, the code must be entered in the mobile theme custom code section
– https://www.screencast.com/t/RltTmnsFUx
Here is a guide to help you identify the elements on the page and their classes using the browser inspector, to help you create custom code and make minor customization that would not be available using the theme options at the moment
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

You could use some Css to change the category tag color on the modules, like this
– https://www.screencast.com/t/FoioYixMs1tQ
This could be used on particular blocks as well
– https://www.screencast.com/t/AOZJVlxo8
This is the code used in the first example, you must enter it in Theme panel->Custom Css and change the color to what you want to use

.td-post-category {
background-color: red;
}

Here is a link to a tutorial explaining how you can use the browser inspector to identify the elements on the page and their classes, in order to create custom code that you can use in the theme panel
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
This way you can make minor customization to some elements, that are not available as an option at the moment.

Thanks

Hi,

You could modify the font color for the post titles on the blocks, for each block if you want to. For example this block on your page
– https://www.screencast.com/t/x4HNQhKs0F7l
This is the code used

.td_block_18 .td_module_10 .td-module-title a {
color: red;
}

Here is a tutorial about using the browser inspector to identify the elements on the page and their classes, in order to create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
This explains how to make minor modifications to the page elements, that would not be possible through the theme options at the moment.
Also I could mention that each block can have a class assigned to it, this can be useful when you have multiple blocks of the same type, to differentiate them – https://www.screencast.com/t/YaboS0Emf
Rows can accept a class as well – https://www.screencast.com/t/70Efz1rEyzc

Thanks

Hi,
Sorry but if i cannot inspect your site I am unable to help with any css. Use the browser inspector and see where you need to change the css to remove that line. I need to inspect the code in order to provide a css for it.
Thank you!

Hi,

The block titles should look identical, I could not say why that one is different without inspecting it on your website. Maybe you have some custom code targeting that block title, or a custom class on that block.
If you could provide a link to your website I will take a look, and see why this is happening. I have created the exact same blocks that you use but this is not happening on my end
– https://www.screencast.com/t/eBJn8XrCI
– https://www.screencast.com/t/9tlT9D2x
You could inspect it yourself using the browser inspector and possibly identify the cause. Here is a guide to using the inspector – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hello theseatinthemiddle,

You should use the Inspector browser and check what kind of font is used. -> https://www.screencast.com/t/OVSjRO8Uev

Thanks for the message!

Hi,

From what I understand you would like to make the Video News demo similar to the Black Version demo. You could use css along with theme options to style it to look like the black demo. This would require you to identify the elements on the page and set the background you want, like in this example for the homepage
– https://www.screencast.com/t/hFbDJhuNJr9e
You can use the browser inspector to identify these elements and include them in the code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
But also you could just install the black demo which is already using a black accent and overall color, and just recreate the page structure form the other demo.

Thanks

Hello isd,

If you want to change the Load More button you will have to use some CSS code because our theme does not have any predefined styles for this button, sorry! Notice that anything else you want to change regarding on style you have to use some CSS code. You should make your custom CSS and for this, I suggest you reading our useful tutorial here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Hi,

Yes, you can, but a link to your site would be better as we can actually inspect it and see the code in the browser inspector. If you want to send it to us in private please contact us on our email address at contact@tagdiv.com
Please also include a link to this conversation.

Thank you!

Hello Sebastian Escobar,

The theme does not have any such an option that allows you to do this but only with a bit of CSS code. You should hide all the meta information container and then you should display it only for your desired posts. You can start to create your own custom CSS code from our useful guide here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Hello nano2408,

Please keep in mind that style was choosing from our web designers. If you want to change it or you want to improve it, you should make it yourself because you need to do more additional customization which we cannot provide at the moment, sorry! If you are not aware of these, please consider hiring a freelancer/developer to help you! As a hint, you can stat your project beginning from this useful tutorial, like this -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Hello,

Try to use chrome when using such tools as firefox seems to have a few issues with css. It is a very difficult browser to work with nowadays. We long switched to chrome as it’s much more reliable. Try this extension along with the browser inspector on chrome: https://www.screencast.com/t/BtLQ8kRc

Thanks.

Hi,

You can use the options in Theme panel->Theme colors to modify the colors for the menu items, and also for the footer – https://www.screencast.com/t/m1FCgHtWMdym
If you would like to change the color for a specific item and there is no option for this by default, this can be achieved through custom code only. If you could provide a link to your website and detailed information about what and how you would like to change these items, I will try to give you a solution.
You could also try to use the browser inspector to identify the elements on the page and their classes, in order to create custom code. Here is a tutorial that could help you
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hello,

Yes, you can add the code just for a specific device if you use the advanced css section: https://www.screencast.com/t/MPrc6vXR0
You can do this for any block you want if you use the browser inspector and get the proper classes for each element.
Here is an example for block 18:
.td_block_18 .td_module_mx8 .td-module-thumb{
height: 500px;
}

Please use this guide in order to customize the theme css: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thank you!

Hi,

The theme works properly by default and this issue is not present. Try to think about what modifications have been made to the theme files, or maybe custom code in theme panel. Also deactivate the child theme if you are using one. Almost all the time plugins are to blame for these kind of image problems, and the solution is to find the responsible one. You can also clear any caching installed after you deactivate the plugins.
Try inspecting the page using the browser inspector to see if there are any errors in the console. Maybe this will provide a clue to why this is happening.

Thanks

Hi,

If you would like to customize a block, and have a unique style apply only to that block, simply add a specific class to it like this for example
– https://www.screencast.com/t/yWMBgADBmmUh
– https://www.screencast.com/t/jt6ZPM7U
– https://www.screencast.com/t/DsXbmGYz
Then you can refer to that custom unique class set to each block, and create you custom code based on it
– https://www.screencast.com/t/U5CUiRJpd
And further style the block according to your needs, knowing that these modifications will only apply to the the block that has the said class.
Here you can find more information about using the browser inspector to identify the elements on the page and their classes, in order to create custom code in theme panel
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hello martialwarrior,

If you want to align your featured image you should use the code which I gave you above. Notice that I cannot correct your custom CSS above because we cannot afford to do this. In the future, if you want to create your own CSS code, you should check our useful tutorial here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Hi,

@ozarga I can not provide a sure, foolproof working solution in this matter. As I previously replied you can try to identify the selectors needed using the browser inspector
– https://www.screencast.com/t/96AkT52oK
– https://www.screencast.com/t/0EOFIn115bbM
– https://www.screencast.com/t/QE7NQpWaAWs9
– https://www.screencast.com/t/uEPbJZ7j2
And try to use them in the required fields in the plugin. I can see that the plugin developers can help you setup the plugin for your website. You can try that and see if you can find a solution.

Thanks

Hi,

If you are referring to the top and bottom social sharing on the post page, there is no options at the moment to change the style. Minor changes can be made using custom css code, and this tutorial to create this custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
For the social counter there are these options to choose from – https://forum.tagdiv.com/social-counter-styles-on-newspaper/

Thanks