Search Results for 'browser inspector'

Hello john1964,

Try to check our useful tutorial regarding on what you can create your own custom CSS code because this customization involves doing such custom work. Please check here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ As a hint, you can provide your website URL so I can give some clues.

Thanks for the message!

Hi,

@perisson Of course it will not work, each menu item is unique (has a unique ID). If you want to use the codes you will have to use your own menu IDs. Use the browser inspector to identify this ID
– https://www.screencast.com/t/t53oXDHa
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
I believe you are referring to the “Infra Estrutura” menu item. You can add a scroll like this (the height can be modified if you want to)
– https://www.screencast.com/t/DQs7HFSL

.menu-item-1225 .sub-menu {
height: 350px;
overflow-y: scroll;
}

Enter the code in Theme panel->Custom CSS section.

@alisamig That modification will affect all the post titles displayed on modules. Example
– https://www.screencast.com/t/revBk1RpdG
– https://www.screencast.com/t/5zMiICiKjQ
Make sure you are making the modification correctly if required for you and save it, then clear all caching and CDN if used. Inspect the result with the browser inspector.

You can add icons in the menus like this
– https://fontawesome.com/v4.7.0/icons/
– https://forum.tagdiv.com/how-to-add-icons-in-menu/

A border could be added with custom code, since the default theme mobile menu does not have this setting
– https://www.screencast.com/t/TevZPwFGfvt

.td-mobile-main-menu .menu-item {
border-bottom: 1px solid black;
}

This is a guide mentioning how the browser inspector can be used to create custom code, for various theme customization
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
This code can then be entered in the theme dedicated custom code sections in the theme panel.

Changing the theme name or child theme name may create issues, try if possible not to change their name. If you want to prevent users from viewing the page source or inspect the page with browser inspectors, you could try content protection plugins. Such plugins are increasingly popular from what I can see.

Hi,

There are some quote styles available
– https://demo.tagdiv.com/newspaper/blockquotes-pullquotes/
These are located in the Formats section
– https://www.screencast.com/t/24KVFSWnhWkL
You could style these differently if you want to, with the browser inspector
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

You can also use the browser inspector, right click and choose inspect. A few examples
– https://www.screencast.com/t/HbIZKtXOl
– https://www.screencast.com/t/GdL404SKGED
More about the browser inspector tool here
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hello benjaone1,

You should use the Inspector browser to check each element from the page and also, so you can figure out how it’s done. Another simple way is to import the demo with content and edit the page because there you will see how it’s made the demo page and what’s the elements. If you will choose this way, notice that you should not edit the dummy content with your content because when you want to replace your theme layout with another demo, all of the posts which have been edited from dummy data will be lost. You can use this tool -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hope this helps!

Thanks for the message!

Hi,

You could use block 2 which has that layout
– https://demo.tagdiv.com/newspaper/block-2/

Or you could use two types of block, for example block 2 on top and block 7 below
– https://www.screencast.com/t/2QGp84diyh
All block have options to set a post limit, in the example I limited block 2 to 2 posts and block 7 to 4 posts. That could be a solution to achieve that layout.

An effect could be done with CSS, depending on what exactly you want the image to do on hover. Use the browser inspector to create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hi,

If you want that result, you will have to experiment with custom code. Only through modifications you can achieve that result. The category templates are predefined, and they will always look as they are supposed to.

Use the browser inspector to create your own code and modify the elements you want
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

First of all make sure you do not have any adblockers enabled. For Adsense ads on AMP you simply have to enter the required ad information in the provided fields
– https://www.screencast.com/t/7EhwRKCzaHwq
For custom ads enter the custom ad code in the provided field
– https://www.screencast.com/t/eVwS9GzH
Be sure to test on mobile devices or browser inspector mobile emulator.

Thanks

Hi,

That would depend on what changes you would like to make to the author box. Visual improvements could be made with CSS. The browser inspector can be used to customize various elements on the website, if there are no theme elements for this
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

I could give you a code to style the box, if you could provide some examples.

Thanks

Hi,

You could use some CSS to change the default colors. Like this basic example
– https://www.screencast.com/t/sNyYc4YSXZO
This is the code used

.td_block_trending_now .td-trending-now-title {
background-color: blue;
color:yellow;
}

If you wanted something else please mention what exactly you want to change about the news ticker.
You can use the browser inspector to make various customization to theme elements
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

We could try a more general code and see if it works for you. Something like this
– https://www.screencast.com/t/QgFM5nt3fU9u
The code will add a border bottom to the top menu and main menu, all the values in the code can be changed (border size, style and color)

.td-header-menu-wrap,
.td-header-top-menu-full {
border-bottom: 5px solid red;
}

Custom codes such as this can be entered in the Theme panel->Custom CSS section. Try it and see if it works properly.

Such customization can easily be done with the browser inspector tool. Inspect the location you want to customize and identify the elements used. Then create custom code. This is a guide in the matter with some examples
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

If the code does not work for you, please mention the header style used, it might need modifications.

Thanks

Hi,

You could disable the comment counts on blocks/modules in the theme panel
– https://www.screencast.com/t/bcSfIFQami
Then use the method described in that topic to implement views on the modules you want. Example for module 4 code entered like this
– https://www.screencast.com/t/QPCuxNP3i4O
By default the views will be displayed like this
– https://www.screencast.com/t/xqgBpyfbdmn
That would not be the proper place for the views, but the theme does not have design for views on modules. You will have to create one, like this example
– https://www.screencast.com/t/KtWG47NuHaxQ
This is the code I used in the example

.td_module_wrap .td-post-views{
position:absolute;
display: inline-block;
right: 0;
}

Here is an useful guide to use the browser inspector to create custom code and make various customization to the desired elements
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

Those would be quotes, these are available in the formats drop-down when creating a post
– https://forum.tagdiv.com/post-formats-for-tinymce/
– https://demo.tagdiv.com/newspaper/blockquotes-pullquotes/

You can color the font of the text and set a background color like this
– https://www.screencast.com/t/nnEB65XyyOv

Of course you can customize the quotes further with custom CSS if needed
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

It would be possible to center the logo with custom code, I would need to know the header style you are using, or a link to your website would me most helpful.

The menu in that website has an entirely different functionality then the mobile menu in the theme. The theme mobile menu opens in a modal window, not as a drop down like there.

You could do maybe something like this – https://www.screencast.com/t/GwxZrEULR9w
And reduce the modal widow width, but it will require more customization to make it look and work properly. This is the code for reducing the width and making the menu fixed when scrolling

.td-menu-mob-open-menu #td-mobile-nav,
.td-menu-mob-open-menu .td-menu-background {
width:20%;
position:fixed;
}

Use the browser inspector to identify the elements used and make modifications to them
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hi,

I couldn’t say if there are any plans to make changes to the theme colors section. There might be changes in future updates but it is not certain. I believe there are more important priorities at the moment.

You can use the browser inspector to style particular elements differently, if desired
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

The main menu background can be changed in the theme panel, this will affect the whole website. An option to have different colors by category does not exist, unless custom code is used.

This is an example where I used a code to achieve different backgrounds, by category
– https://www.screencast.com/t/sqfbHe3jV
– https://www.screencast.com/t/5ELJAvc5p
Notice that that by using the category unique class in the code, the results are like you want. Each category page displays the category name and category ID on the body
– https://www.screencast.com/t/VS62hv9PJ
You can use either one in the code
– https://www.screencast.com/t/t1cXHbXgK
This is the code used in the example

.category-2367 .td-header-wrap .td-header-menu-wrap-full {
background-color: blue;
}

Create a different one for each category, then enter it in Theme panel->Custom CSS
– https://www.screencast.com/t/C6nCeuB5HF

This is also a useful tutorial about using the browser inspector to identify the elements on the page and created code for various customization
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Salutare,

Multumim pentru apreciere, incercam sa facem tot posibilul pentru a oferi un produs de calitate.

1. Da se poate, in setarile WordPress
– https://www.screencast.com/t/Tn9BGdFs
– https://www.screencast.com/t/16HPVEfDyrto
– https://codex.wordpress.org/Formatting_Date_and_Time

2. In author box trebuie introdus ID-ul userului
– http://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/
– https://www.screencast.com/t/VZJKCy6TOg
Vor aparea inforamntii preluate din profilul user-ului
– https://www.screencast.com/t/xFmhvLsoA

3. Icoanele de share vor fi ascunse automat, doar cand nu este destul spatiu disponibil
– https://www.screencast.com/t/oEPEJBgMOxOT
– https://www.screencast.com/t/h6YzT7qaE6
Sunt multe stiluri disponibile pentru icoane in theme panel
– https://www.screencast.com/t/25ub7K9b5

4. Acele tag-uri post fi customizate doar cu CSS, la momentul acesta. Nu este o setare pentru a personalize culoarea acestora. Poate va fi disponibila dupa un update viitor, nu as putea spune sigur.
Deci se poate folosi CSS in aceasta privinta
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

5. Sectiunea de latest (si sidebar aferent) va fi afisata cand este selectat acest page template
– https://www.screencast.com/t/ytNJMKHQmw4
Se poate customiza, sunt optiuni pentru aceasta sectiune. Sau se poate selecta un page template diferit.

6. Acele elemente din footer sunt predefinite. Unele footer templates contin elemente predefinite, altele sunt goale
– https://forum.tagdiv.com/footer-templates/
Elementele predefinite nu pot fi modificate. Se pot adauga widgets in footer configurate dupa preferinta
– https://www.screencast.com/t/G1gd1co9WdMv

7. Acela este un post template (post template 11). Sunt multe modele din care se poate selecta, indiferent de demo instalat
– https://forum.tagdiv.com/post-templates-2/
Pentru featured video posts se recomanda a fi folosite doar unele post templates
– https://forum.tagdiv.com/featured-image-or-video/

8. Se poate customiza in theme panel cu setarile disponibile
– https://forum.tagdiv.com/more-articles-box/

#Sugestii

1. Se poate selecta sa se incarce mobile logo can meniul e sticky, in theme panel
– https://www.screencast.com/t/HrQYiiKkHVqQ

2. Multumim pentru sugestie, o sa adaug acesta propunere pe lista noastra.

Multumesc!

Hi,

Adding margins or padding to the elements on the page may break the layout and design. The theme modules and blocks are predefined with fixed values, adding margins to them will most likely damage them.

You could review the codes and see why that is happening and avoid it, also you can use the Advanced CSS sections in the theme panel. Create code based on device if necessary using those sections
– https://www.screencast.com/t/CUJHQNahnXX2

Use the browser inspector to identify the elements on the page and experiment further
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

That would mean something is wrong, having such long loading times. Please provide a link to your website so we can inspect it. Check for errors using the browser inspector console, they will be displayed there if there are any.

Thanks

I have tested this and the solution works. Enter the code that is provided in that topic here in this file
– https://www.screencast.com/t/PXvipAgOl
Then the views have to be called in each module file that you are using> example for module 1
– https://www.screencast.com/t/8UMPo2c8n

<?php echo $this->get_views();?>

The views will show in the module – https://www.screencast.com/t/CeuSAQ4J
Now apply some styling, the one provided in that topic will make the views look like this
– https://www.screencast.com/t/qHYMP4GLP
But you can style them further with CSS code if needed
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

I believe you are referring to this effect
– https://www.screencast.com/t/N5JM1wkkeZy
You could do that if needed, for the modules you want. For example in the Big grid
– https://www.screencast.com/t/n5owD6wIp
This is the code used for that

.td_block_big_grid_1 .td_module_mx5:hover .td-module-title a,
.td_block_big_grid_1 .td_module_mx6:hover .td-module-title a {
text-shadow: rgba(255,255,255,0.35) 0 0 15px;
}

You can modify it as you wish and enter it in Theme panel->Custom CSS. Use the browser inspector to help you with customization
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
More about using text-shadow here
– https://css-tricks.com/snippets/css/css-text-shadow/
– https://css-tricks.com/snippets/css/css-text-shadow/

Thanks