Finding an ID or Class of an Element from a Website

[D5 Creation]

Finding an ID or Class and Change Style or Use a Hyperlink in any Content of the Theme

Please watch this Video First
This video is showing jQuery Implementation in Second Part which is not necessary for Style Changing.

CSS: Change Elements Style

You can change any Element’s Style easily with D5 Creation Themes
First of all you need to find the ID or Class of the Element. You can find this from the Inspect Element of your browser. Please watch the above Video First. You should use a # with an ID like #abcd and use a dot . with a class like .xyzx . Then you can use the CSS Styling. Suppose you will change the #header font size. Then you can use the Following in the WP-Admin > Appearance > Theme Name Options > Colors > Color CSS Box

#header{ font-size:17px; } #main-menu-con a{ color: #333333; } .someclass{ background-color: #eeeeee; }

1 2 3

#header{ font-size:17px; } #main-menu-con a{ color: #333333; } .someclass{ background-color: #eeeeee; }

or the Following in the WP-Admin > Appearance > Theme Name Options > General Options > Custom Code within Head Area Box

<style> #header{ font-size:17px; } #main-menu-con a{ color: #333333; } .someclass{ background-color: #eeeeee; } /* More CSS above or below here */ </style>

1 2 3 4 5 6

<style> #header{ font-size:17px; } #main-menu-con a{ color: #333333; } .someclass{ background-color: #eeeeee; } /* More CSS above or below here */ </style>

jQuery: Adding Hyperlink

You can add jQuery with Elements easily with D5 Creaion Themes.
You can add a Hyperlink in any Content of D5 Creation Theme. First of all you need to Find the Content ID or Class using the Inspect Element Tool of the Browser. Suppose we shall add a Hyperlink in the Contact Number of Innovation Theme. We can find the Class or ID of an Element using the Inspect Element Tool of Firefox, Chrome etc.

Then you can add the Following Code in the WP-Admin > Appearance > Innovation Options > General Options > Custom Code within Head Area Box.

Class Name must start with ( . ) like .abcd and ID Name must start with ( # ) like #abcd
The .connumber should be changed to the ID or Class Name and https://d5creation.com should be changed to your desired Link Url. The link should be this tel:+1-234-567-8900 or tel:+12345678900 format if you like Calling to your Number: tel:+1-234-567-8900 or tel:+12345678900. Modern Browsers can detect the Number and can Show the Calling Screen with the Number. For E-Mails: mailto:[email protected] . The below .connumber, .extranumber etc. will be replaced with the Class or ID and Link to Phone Number, E-Mail or Website/Web Page +12345678900, [email protected] and https://d5creation.com will be replaced with your Link

<script> jQuery(window).load(function(){ // The Following 03 Lines are examples. You can use 1 line or more as per your requirements // Link to a Phone Number jQuery(".connumber").wrap('<a href="tel:+1-234-567-8900" target="_blank" rel="noopener noreferrer nofollow"></a>'); // Link to an E-Mail jQuery(".extranumber").wrap('<a href="mailto:info@d5creation.com" target="_blank" rel="noopener noreferrer nofollow"></a>'); // Link to an Website/Web Page jQuery("#header-content").wrap('<a href="https://d5creation.com" target="_blank" rel="noopener noreferrer"></a>'); }); </script>

1 2 3 4 5 6 7 8 9 10 11

<script> jQuery(window).load(function(){ // The Following 03 Lines are examples. You can use 1 line or more as per your requirements // Link to a Phone Number jQuery(".connumber").wrap('<a href="tel:+1-234-567-8900" target="_blank" rel="noopener noreferrer nofollow"></a>'); // Link to an E-Mail jQuery(".extranumber").wrap('<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow"></a>'); // Link to an Website/Web Page jQuery("#header-content").wrap('<a href="https://d5creation.com"  target="_blank" rel="noopener noreferrer"></a>'); }); </script>

[Author]

Posts