Search Results for 'browser inspector'

Results from the Forum
Bogdan B.
tagDiv Staff

Hello,
Unfortunately I have no list to provide the exact places where each of these 2 fonts is used. You can us the browser inspector if you want to see fonts exactly or you can check style css and search for the fonts and see where it is added. For example. use the chrome inspector and inspect an element, let’s say the main menu: http://screencast.com/t/bRAjAWhnJ you can do this for every element and see the font used.
I hope this helps.
Thanks.

Miso_J
tagDiv Member

Hi Bogdan,

Thank you very much. I used browser inspector. Thanks to inspector i found which code in main style.css i have to change. However after change from 26px to 10px nothing happens.

Code from style.css:
.vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container {
margin-bottom: 10px !important;
margin-right: 0;
border-bottom: 2px solid #4db2ec;
display: block;

Code from Inspector:

<div class=”vc_tta-tabs-container”>
<ul class=”vc_tta-tabs-list”>
<li class=”vc_tta-tab vc_active” data-vc-tab=””>
<span class=”vc_tta-title-text”>Title</span></div>

And CSS:
.vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container {
margin-bottom: 26px !important;
margin-right: 0;
border-bottom: 2px solid #4db2ec;
display: block;
}

Any idea how to do it?

Bogdan B.
tagDiv Staff

Hi,
It’s best to use the browser inspector if you want to alter the css as you can see a visual representation of the css: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!

Andrei L.
tagDiv Member

Hi

You will need a custom css to achieve that layout. These are selectors which hold the style for these icons: http://screencast.com/t/aPALhEwIMVsE and basically you will need to generate a css shape. For more details please check this link: https://css-tricks.com/examples/ShapesOfCSS/ Also this tutorial might helps: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks!

Handsomec
Participant
#0

Hello, and thank you for an amazing theme! 🙂

Can anyone please tell me whats the name of the font used in the Newspaper 7 demo, logo?
( NP black version – logo on top of site)

In the “theme fonts” tab, it only says “default font” and not the name of the font.
I have tried inspecting the site in the browser inspector, but as an amateur i cant sort this out.

It would also be nice if you could tell me the name of the other font used in the demo version.
Menus, “trending now ” etc.

Thank you very much.
Have a great summer!

C

Catalin
tagDiv Staff

Hello Gadgetsay,

You will have to add and this code to your CSS above in order to achieve as you wish.

The code is ->

.td-load-more-wrap a {
width: 696px;
}

In the future, if you want to customize your website you will have to create yourself the custom CSS code for achieving as you like because all of these processes are custom made and involve additional customizations. A very useful tutorial you should find here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Andrei L.
tagDiv Member

HI

Please note that all this customizations takes times and many tests in order to be achieved. We can only offer support for current theme’s features but not custom work, sorry. I’ve already provided some custom css which can be used as example fr further customixations. Also here you can check our tutorial about how to use browser’s inspector to pick the right selectors: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
and here you can take a look at some css tutorials which may help; http://www.w3schools.com/css/default.asp

Thanks for your understanding!

Bogdan B.
tagDiv Staff

Hi,
The mega menu background color cannot be changed from the theme panel so I assume you are changing it with css. You will need to target the other elements as well and change their colors and hover colors. You can use this method: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!

Bogdan B.
tagDiv Staff

Hi,
Unfortunately the page builder does not allow you to add classes on a specific title. You can only add an extra class to the row in visual composer and use it to target the block title by using your browser inspector: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!

Bogdan B.
tagDiv Staff

Hi,

1) A module is the base element in our theme. Every block is simply a container of 1 or more modules. In this section of the theme paenl you can see exactly what module is used on what block: http://screencast.com/t/uHbbrmqWCXr
If you want to be more specific about it, you can find out faster by using the browser inspector. For example on a block 1, the small thumbnails: http://screencast.com/t/bkbqegiM2. The small module is a module 6. It’s module 6 you have to edit. The screenshot had module 5 highlighted (my bad) but it is module 6 being edited if you look here: http://screencast.com/t/MWULaIJuoTW. Sorry for the confusion.

2) The black header color shows up when your site gets a bit heavier on the loading speed. Css works in cascades and if you use for example css optomization tools that move the css render block to the footer, then you will be able to see each stept of the css re-write on the first load. The solution for this will be to change the css directly in style.css so there will not be any re-writes done to the file. This is the default css behavior and happens on every theme. An easy way to do it without too much searching is to simply access the page source and copy all of the rendered css directly in style./css at the bottom of the file: http://screencast.com/t/Oym8Cldak (it’s a big list. Copy everything between the ‘style’ tags)

3) The font is not bold in the left big thumb, but rather the font increased. If I increase the font for the small thumbs as well, it will also look bold. You can target them with css like so:
.td_module_6 .entry-title{
font-weight: 600!important;
}

4) Well the widgets are not the same height so you will need a bit of css customization to adjust the different margins to the containers to match the center widget. But adding more content to these sections will cause them to position differently again.
For the current layout you can use this code to make them align :
.widget_display_topics{
margin-bottom: -22px!important;
}
.widget_display_forums{
margin-bottom: -36px!important;
}

However I cannot guarantee this solution can be a viable one if the content of these widgets changes. All widgets are dynamic so longer titles will make them ‘fall’ below again

5) You can align the instagram text by adding this css code:
@media(max-width: 767px){
.td-footer-instagram-container .td-footer-instagram-title .td-footer-instagram-user-link{
display:initial!important;
}}

6)You can make the search text bigger by using this code:
.td-search-wrap-mob .td-search-input span{
font-size: 30px!important;
}

7) If you want to redirect the login to the bbpress login ,you can use simple 301 redirects and simply redirect the default login to the bbpress forums, but i;m not sure exactly how the login will work then. So maybe you will want a redirect after the login is made. So a user logs in ad is imediatly redirected to the forums maybe, Thait is doen with plugins as our theme dopes not have any such options.

8) That is because there were a few css changes and the code you had in your custom css needed to be more specific. Such things happen afet an update as css gets changed all the time. That is why the custom css code you apply needs to be very specific or some other more specific code we may add in a new update could overwrite it.

9)The big grid can be set as a full box if you remove the 2 pixels margin like so :
@media (max-width: 767px){
.td_block_big_grid_12 .td-big-grid-wrapper .td-big-grid-post:last-child .td-module-thumb {
margin-left: 0px!important;
}}

10) I’m not sure the code you entered is valid or not, you will have to get a proper ad code from the ad provider and then wrap it into these div elements like this topic suggests: https://forum.tagdiv.com/using-other-ads-non-adsense-ads/

Thank you!

Bogdan B.
tagDiv Staff

Hi,

There is an easier way to do it besides altering the theme code. If you cannot upload big enough images, there is the thumbnail upscale plugin that will enlarge your images to fit the container. Our users recommend it and it seems to be working fine.
If you want to check if the image is a thumbnail or the full image you can use the browser inspector and check the image size. if there is no ‘(natural size)’ then you are dealing with a thumbnail.
example: http://screencast.com/t/SL9sA9wObHI

Thank you!

Bogdan B.
tagDiv Staff

Hi,

2) This css should remove a bit of spacing but keep in mind that css is very specific and it will only apply to the homepage on mobile. If you require other adjustments, you will have to use the browser inspector to figure out how to remove the spacing with css as this is very personal and we cannot provide a general code that can remove the white space everywhere:
@media (max-width: 767px){
.block-title{
margin-bottom:10px!important;
}
.td_block_1 .td_module_4{
padding-bottom: 5px!important;
}
.td_block_5 .td-block-row:last-child .td_module_3{
padding-bottom: 5px;
}}

5)You can activate the author name and the comments count for that particular block by removing the 2 // lines from here: http://screencast.com/t/WGirLBFwo Unfortuantely that’s about it. There is no other content that can fit in there as there has to be enough space for longer post titles.

6) The problem with the different module under the recipes category is because you only have 4 posts to show in that category .Every category is made out of 2 sections. A big grid and a module. You have a big grid with 3 posts and a module with 1 post. If you add more posts it will populate the module section with more posts. These can be selected from the per category settings: http://screencast.com/t/xEp1tg1Kw

I hope this helps.
Thank you!

Bogdan B.
tagDiv Staff

Hello,

1) Unfortunately our theme does not allow such a secondary menu spot on the mobile menu. It will have to be made custom but it will be no easy task unfortunately as there is no such spot for a secondary menu and it has to be created from scratch. We suggest hiring a developer to help out on this task.
2) The space can be adjusted with css by using the browser inspector and removing any extra padding. The space comes from the author name and date. I will need access to your site so I can provide the proper code though.
3) The comments color can also be changed with css as there is no setting for them in the theme panel. You can use this code:

.td-module-comments a{
background-color:grey!important;
}

4) I have tested the zoom-out issue on our end but we do not get a zoom-out effect. Please also test our demo at demo.tagdiv.com/newspaper to see if you still gfet a zoiom on our demo. Try to write a comment and see. I tested on android and ios but there was no zoom. it could be a local issue, maybe due to plugins.
5) Again I weill need access to your site so I can figure out which module is being used there and check it;s code to see if there are any hidden options available to fill the space. For some the category tag or author/date was hidden with css as a design choice.
6) Again, I will need access to inspect the different module. The old access you provided for us via email does not work anymore so please create an account that is working so we can login on your site and send us the login info via email at contact@tagdiv.com Alswo include a link to this topic.
7) The code for each section of the pull-down filter can be found here: http://screencast.com/t/xhWykDVv
8) As for the custom title you set to your contact form, it will grab the theme accent color. If you want to change it you need to change the code a bit. Try this one:

<div class="block-title mycustomclass"><span>Contact Form</span></div>

and then use this css to style it:

.mycustomclass span{
background-color:Red!important;
}
.mycustomclass{
border-color:red!important;
}

Thank you!

Bogdan B.
tagDiv Staff

Hi,

Unfortunately the theme has n o such setting. you will have to use css to do it. Every menu item has it;s own class. You can use the browser inspector to change colors by following this guide: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/http://screencast.com/t/v3svO2ypoga

Thank you!

Bryson T
tagDiv Member

Blockquotes are a styled element so you just need to add some custom CSS to your Custom Code in the theme panel. Probably easiest to use inspector in your browser to copy the styles of the quote style you like, and then modify those styles for the classes of the default blockquote. It’s a bit of custom work but it’s not bad if you’re not new to CSS.

Bogdan B.
tagDiv Staff

Hi,
You can do it with css. All menu items have a unique ID you can see with your browser inspector and then apply css to it. For example in my menu if i am to target one menu item i would use this code:
.menu-item-3796{
background-color:red!important;
}

http://screencast.com/t/epd9R9tje7E
Hope this helps
Thanks.

Bogdan B.
tagDiv Staff

Hello,
Meta information can be either removed from the code or hidden with css.
You need to identify the module you use and use the browser inspector to get the classes. Use this code to hide the meta and add different block classes to it depending on the block or module you want to remove the meta from.
for example on a block 4 I would use the code like so:
\.td_block_4 .td-module-meta-info{
display:none!important
}

Thank you!

Bogdan B.
tagDiv Staff

Hello,
Visual composer was adapted to work with our theme, Yes. That is why we provide it and recommend using only the version we provide.
If you want to decrease the padding between elements, you can use the browser inspector and remove them with css as there is no setting for this.
Thank you!

Bogdan B.
tagDiv Staff

Hi,

The link behind the xxx did not work. I have checked your site but could not find the front-2 class anywhere on the page you provided. Maybe that is why the css does not work as you us a different class for your button.
You can use the browser inspector to get the class of the button you wish to style and change it in the css from front-2 to the class of the button. You can follow this tutorial on how to use the browser inspector: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thank you!

Bogdan B.
tagDiv Staff

Hi,
Those are multiple paces that need to be targeted with css. There is no one code to remove all spaces.
For the title, you seem to have custom margins added to it that does not come from the theme:
http://screencast.com/t/IrouAYvpgRg and http://screencast.com/t/HKihUxCrk
Please remove the margins I mentioned from your custom code.
As for the other elements, you need to use the browser inspector and adjust the padding bottom for every element. You can use the browser inspector to see these paddings: http://screencast.com/t/jegelnncJ
You can use this guide on how to use the browser inspector: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!

Bogdan B.
tagDiv Staff

Hi,

There are several sections you need to set a color to, there isn’t only one code for all. I will give it a shot:

.td-main-content-wrap{
background-color:grey!important;
}
.post{
background-color:grey!important;
}
.td-category-header{
background-color:grey!important;
}
.td-category-grid{
background-color:grey!important;
}

There still could be parts of the site that do not get affected by this code. The best thing to do is to use the browser inspector to find the specific part of the site and use the class which gets the white color:
http://screencast.com/t/OD0A0NO92L7

Hope this helps.
Thank you!

Bogdan B.
tagDiv Staff

Hi,
This can be done with custom css but i will need to inspect your site so I can provide the proper code, or if you know a bit of css, you can do it your self. You need to use the browser inspector and get the unique class for every menu item: http://screencast.com/t/jYA58Nat7vA5
Thanks.

Bogdan B.
tagDiv Staff

Hello,
You can remove the white space from section 2 using the browser inspector and identifying the padding for each block: http://screencast.com/t/UFhcnMGcjVuZhttp://screencast.com/t/hiepaqaBs
unfortuantely the vertical space from section 1 of your screenshot cannot be modified that easy as if you modify it,element will break on your site as our theme was built with a fixed width and all elements depend on this fixed width. If it is changed, elements will ‘break’ as their css will not apply properly anymore.
Hope this helps.
Thank you!

Bogdan B.
tagDiv Staff

Hi,
There is no setting in the theme for this so it will have to be made custom. Use tha browser inspector to find the title and add padding to it with css like so:
.td_module_mx5 .td-meta-info-container{
padding-bottom:20px!important
}

If you want to add a shadow or outline to the title, you can do it from block settings by selecting a big grid style 4 from block settings and then changing the color like so:
.td-grid-style-4 .entry-title{
background-color: rgba(7, 0, 0, 0.36);
}

Hope this helps.
Thank you!

Andrei L.
tagDiv Member

Hi

You can use block’s specific css classes to add a custom style for it. Please check this tutorial for more details about how can be found the necessary classes for a specific elemnt: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks!

Viewing 25 results - 976 through 1,000 (of 1,099 total)