The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Double size my icons!
N1c0lat0
post Oct 5 2018, 04:39 AM
Post #1





Group: Members
Posts: 3
Joined: 5-October 18
Member No.: 26,725



Hi All.

This is my site: http://native-speaker.biz/ I’m looking for a way to double-size the icons on my home page. There are six of them in total. You can see them here:

https://www.dropbox.com/s/nl6yk29224v87zg/S...ervice.png?dl=0

The Wordpress theme used for the site is Alchem. I edit the content in the section with the icons here, in Wordpress: Appearance > Customize > Homepage > Section: Service.

If I inspect the source code for one of the icons shown above, I see this:

CODE
<img class="feature-box-icon " src="http://native-speaker.biz/wp-content/uploads/2017/08/Optimise_icon_compact-1.png" alt="" scale="0" style="visibility: visible;">

So, I reckon it’s possible to adjust the scale using this element: scale=”0″. Also, I see that this probably means that I must switch the Wordpress content model from 'default' to 'custom content'. But, once that's done, I will need to extract the source for the existing content I have in that section and I don't know how to do that.

So, to the specific questions:

1. How do I extract the source code for the content in the Home Page > Features section?
2. How should I adjust this source code to double-size the six icons?
3. Should the adjusted code be placed in the custom content field at the bottom of the Wordpress editing interface (Appearance > Customize > Homepage > Section: Service) - or somewhere else? (Guidance note pasted from the interface: "Custom Section Content - This would display instead of fixed layout once Content Modal is set as Custom. HTML Code and Shortcode are both allowed.")

Many thanks for any help you can provide!

Nick
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 5 2018, 11:49 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



About your other questions, I've never used WP, so no idea about the interface. Typically with software like forums and blogs they consists of a bunch of templates that need to be edited. The templates aren't plain HTML, but a mix of PHP (in this case) and HTML. That means if you make a mistake the program (your blog) can't work. Basically your site breaks and all you see is a sad error message. So avoid until you understand a little more.

Possibly WP offers some safe interface that lets you edit at least parts of the blog.

But in this case you don't need to go there. The change you need to do is in a style sheet. This one: http://native-speaker.biz/wp-content/theme...e.css?ver=1.4.7 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 5 2018, 11:55 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh crap! I deleted my own post, the one above the one that's left. Give me a minute.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 5 2018, 11:59 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Here's what I wrote. blush.gif

Never heard of the scale attribute. Which doesn't mean it doesn't exist. But I don't find it in the HTML5 spec either and I know it isn't in previous versions.
https://www.w3.org/TR/html5/semantics-embed...the-img-element

The scale attribute isn't in the source of the page either. So where did you find it? smile.gif

Anyway, you have this HTML.


HTML
<div class="icon-box alchem_section_2_feature_image_2" data-animation=""> <img class="feature-box-icon " src="http://native-speaker.biz/wp-content/uploads/2017/08/Web_content_icon.png" alt="" style="visibility: visible;"></div>



Then in the CSS the icons are made 100 wide and are put in a DIV with set dimensions and the class iconbox. You can change the size by changing widht and height of .iconbox.


CODE
.icon-box {
    text-align: center;
    color: #222;
    font-size: 40px;
    line-height: 1em;
    width: 1em;
    height: 1em;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
N1c0lat0
post Oct 6 2018, 08:26 AM
Post #5





Group: Members
Posts: 3
Joined: 5-October 18
Member No.: 26,725



Hi Pandy.

Many thanks for your reply. I will try out that approach to scaling my site's icons over this weekend.

To answer your question: I found the code snippet by right-clicking on the first icon in Safari web browser and selecting "Inspect Element". After doing that, this was what I saw...

https://www.dropbox.com/s/qlsraw1gw3kpk57/S....14.05.png?dl=0

A quick clarification about adjusting the scale, in the way you've suggested...

QUOTE
Then in the CSS the icons are made 100 wide and are put in a DIV with set dimensions and the class iconbox. You can change the size by changing widht and height of .iconbox.

CODE
.icon-box {
text-align: center;
color: #222;
font-size: 40px;
line-height: 1em;
width: 1em;
height: 1em;
}


As I understand it, you recommend I edit "width: 1em;" and "height: 1em;". If I've got that right, how do I increase the scale? Change "1em" to "2em"? Would that be OK?

I will experiment with it of course, but I'm taking this opportunity to be clearer wink.gif

Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 6 2018, 07:46 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Correct.

I don't know what scale is and why Safari shows it. Other browsers do not. And it isn't there if you view source. I don't know if it's something Safari uses internally and in that case why it shows it. You won't see it when you edit the the page. If you after all do, just leave it alone. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
N1c0lat0
post Oct 8 2018, 02:52 AM
Post #7





Group: Members
Posts: 3
Joined: 5-October 18
Member No.: 26,725



Hi Pandy.
Well, the news is that I tried out your suggestion and it worked perfectly, first time!
Thanks so much for your solution. Not only have I fixed that one issue, but my understanding of how the pieces of my site fit together has increased smile.gif
Have the greatest of Mondays.
Nick.

This post has been edited by N1c0lat0: Oct 8 2018, 02:52 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 8 2018, 03:19 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Thank YOU. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 27th March 2024 - 12:12 AM