Printable Version of Topic

Posted by: N1c0lat0 Oct 5 2018, 04:39 AM

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/Screenshot%20native-speaker.biz%20-%20service.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:

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

Posted by: pandy Oct 5 2018, 11:49 AM

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/themes/alchem/css/shortcode.css?ver=1.4.7 .

Posted by: pandy Oct 5 2018, 11:55 AM

Oh crap! I deleted my own post, the one above the one that's left. Give me a minute.

Posted by: pandy Oct 5 2018, 11:59 AM

Here's what I wrote.

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?

Anyway, you have this HTML.

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.

Posted by: N1c0lat0 Oct 6 2018, 08:26 AM

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/Screenshot%202018-10-06%20at%2015.14.05.png?dl=0

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

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

Thanks again!

Posted by: pandy Oct 6 2018, 07:46 PM

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.

Posted by: N1c0lat0 Oct 8 2018, 02:52 AM

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
Have the greatest of Mondays.
Nick.

Posted by: pandy Oct 8 2018, 03:19 AM

Thank YOU.