Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

mail_open
How do I edit my home page layout?
Avatar
Jimbob
UK
Member
November 20, 2013 - 2:08 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

Hi,

There are a couple of minor layout issues I want to tidy up on my home page layout such as nudging the position of text and static blocks a few pixels one way or the other etc

Can anyone advise what file I need to edit for this and what software to use to open and edit the file?

Thanks

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
Matthew Ogborne

Founder
November 20, 2013 - 2:58 pm
Member Since: July 18, 2013
Forum Posts: 4565
sp_UserOfflineSmall Offline

Howdy James,

It depends which block :)

But Magento makes this easy to identify.

Go to System > Configuration > Select the store view from the list in the top left > Then in the left menu click on “Developer” at the bottom, then for “Debug” section set “Template Path Hints” and “Add Block Names to Hints” to yes and press “Save Config”.

Now view your site and you’ll be shown which block and which phtml file you need to edit.

As far as editing the files, Notepad++ is the suggested file edition, it’s free and you can download it here http://notepad-plus-plus.org/d…..6.5.1.html

However before you go editing theme files, DO NOT edit any of the files in the base or default style directories. The reason why not is simple, you would be editing the backup files, so if you made a mistake or wanted to edit the theme later, your core files would not be the originals. Magento has a parent/child system for Magento themes and I would suggest you create a child theme and make edits only to the files that need changing.

The video will give you an insight into how to do this:

Hope that helps!

Matt

"Selling an item online is easy, but making living from a business that sells online, well that’s something different entirely!"

Ultimo Magento Theme

Avatar
Jimbob
UK
Member
November 21, 2013 - 10:03 am
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

Go to System > Configuration > Select the store view from the list in the top left > Then in the left menu click on “Developer” at the bottom, then for “Debug” section set “Template Path Hints” and “Add Block Names to Hints” to yes and press “Save Config”.
Now view your site and you’ll be shown which block and which phtml file you need to edit.

Hi Matt,

Thanks for the info. I have followed the above instructions and as illustrated in the below screenshot but I do not see anything different on the frontend?

screenshotImage Enlarger

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
Matthew Ogborne

Founder
November 21, 2013 - 10:16 am
Member Since: July 18, 2013
Forum Posts: 4565
sp_UserOfflineSmall Offline

Howdy James,

Hmmm…. ok, set those back to defaults by ticking the boxes, remove the IP address and pressing save.

Then switch to the store view, set them to Yes and don’t set an IP address and then see if that works on the front end.

And if it does, tada! Set the IP address so only you see it.

Let me know how you get on.

Matt

"Selling an item online is easy, but making living from a business that sells online, well that’s something different entirely!"

Ultimo Magento Theme

Avatar
Jimbob
UK
Member
November 21, 2013 - 12:30 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

OK.

I’ll give it a try.

Thanks

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
Jimbob
UK
Member
November 21, 2013 - 12:52 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

Yep. That worked.

Thanks Matt

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
Matthew Ogborne

Founder
November 21, 2013 - 3:04 pm
Member Since: July 18, 2013
Forum Posts: 4565
sp_UserOfflineSmall Offline

Howdy James,

YAY! Those two tick boxes have saved me countless hours, as it makes it sooo easy to identify the blocks & template files :)

Matt

"Selling an item online is easy, but making living from a business that sells online, well that’s something different entirely!"

Ultimo Magento Theme

Avatar
Jimbob
UK
Member
January 10, 2014 - 5:17 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

Having found a bit of spare time I have finally managed to return to have another look at this topic and try to achieve what it is I am trying to achieve, but have come to another stumbling block.

So far I have managed to;

Identify which blocks and related files I need to edit via “Debug” section set “Template Path Hints” and “Add Block Names to Hints” to yes and press “Save Config”

This is the footer.phtml

Looking at this file in text editor I can see what blocks have been added to the code to create the layout of my store footer as shown in the screenshot below.

However, what I can not figure out is how I actually edit the layout and look of the footer block as illustrated in the below screenshot below.

screenshotImage Enlarger

Can anyone advise please?

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
Matthew Ogborne

Founder
January 11, 2014 - 1:35 pm
Member Since: July 18, 2013
Forum Posts: 4565
sp_UserOfflineSmall Offline

Hi James,

So basically there is a large space at the bottom? If that’s the case use either the document inspector in Chrome or something like Firebug in Firefox (google these for guides), to see which block is being forced down with a large amount of padding or margin for the CSS.

Matt

"Selling an item online is easy, but making living from a business that sells online, well that’s something different entirely!"

Ultimo Magento Theme

Avatar
Jimbob
UK
Member
January 11, 2014 - 3:16 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

OK.

Have managed to view page with Chrome Inspect Element, which I am assuming what you were referring to.

Everything then started to look very complicated and confusing.

Think this may be a developer job?

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
TheWebsiteGuy (Chris Astley)
support@thewebsiteguy.xyz

Partner
January 11, 2014 - 3:41 pm
Member Since: November 8, 2013
Forum Posts: 101
sp_UserOfflineSmall Offline

Hi James,

Looking at the source of your website the problem is that you have 5 
with a space in causing each one to create an extra line of nothing below your social icons. These need to be removed will either be contained in a static block or the footer.phtml file within your template.

<div class="box-footer">
***********Some other code*********
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<ul>
</ul> </div>

Also another simpler option for template hints I find is to use this great extension Aoe TemplateHints

Chris

Avatar
Jimbob
UK
Member
January 11, 2014 - 3:44 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

HI Chris,

Thank you very much for taking the time to have a look and reply.

Where will I locate the source code for the relevant static blocks?

Cheers

James

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
TheWebsiteGuy (Chris Astley)
support@thewebsiteguy.xyz

Partner
January 11, 2014 - 3:48 pm
Member Since: November 8, 2013
Forum Posts: 101
sp_UserOfflineSmall Offline

James1 said

HI Chris,

Thank you very much for taking the time to have a look and reply.

Where will I locate the source code for the relevant static blocks?

Cheers

James

No problem James. If it is contained in a static block you will access it via the Magento admin panel. Go to CMS tab on the top menu and select Static Blocks, check through the list if any of the data in Title or Identifier column make reference to footer. Open it up and see if you see code that looks like what I posted above. IF not then it will most probably be in your template file.

Chris

Avatar
TheWebsiteGuy (Chris Astley)
support@thewebsiteguy.xyz

Partner
January 11, 2014 - 3:50 pm
Member Since: November 8, 2013
Forum Posts: 101
sp_UserOfflineSmall Offline

If you download the extension from github and upload via FTP it will be very easy to identify where you need to look/edit.

Chris

Avatar
Jimbob
UK
Member
January 11, 2014 - 4:25 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

Excellent.

I have sorted that one and it looks a lot cleaner now. However, I have tried to follow the same process to fix a gap below the category page header as shown below, but with no joy.

I have tried looking in category/view.phmtl but there doesn’t seem to be any line returns in there and nor are there any in the static block below that holds the sale banner.

Any suggestions Chris?

Where is the actual code for all the different static blocks actually found? I know content for the static blocks is under the CMS tab, but where is the code that is used to actually generate the static blocks that are inserted in to pages?

category pageImage Enlarger

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
TheWebsiteGuy (Chris Astley)
support@thewebsiteguy.xyz

Partner
January 11, 2014 - 4:29 pm
Member Since: November 8, 2013
Forum Posts: 101
sp_UserOfflineSmall Offline

Hi James,

Glad i could help. This one is controlled in your css file, not sure which file or line number as you have enabled css combining but this is what your looking for which is probably in your main style sheet.

.has-description {
background: url("http://www.giggleberries.co.uk…..&quot;) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 167px;
margin-bottom: 32px;
position: relative;
}

You need to adjust the 32px to give the required gap.

Chris

Avatar
Jimbob
UK
Member
January 11, 2014 - 4:46 pm
Member Since: November 15, 2013
Forum Posts: 453
sp_UserOfflineSmall Offline

Great.

Your dead clever.

It is all looking much tidier now.

Cheers

Adventurist and online ecommerce retailer based in the UK. Trading since 2006.

Avatar
TheWebsiteGuy (Chris Astley)
support@thewebsiteguy.xyz

Partner
January 11, 2014 - 4:47 pm
Member Since: November 8, 2013
Forum Posts: 101
sp_UserOfflineSmall Offline

Thanks James Embarassed , glad I could help.

Chris

 

Why Should You Join UnderstandingE?

 
  • Access to over 500 step-by-step video tutorials
  • +20 video courses available
  • Magento, M2E Pro, Magmi, eBay, Amazon & Design all covered
  • Everything is in 100% Plain English
  • Learn how to build your own multi-channel software for eBay & Amazon
  • Access to the community forums, meet fellow business owners like yourself

Join Now with 2 Clicks

 

Join now for less that £1 per day you can gain access to over 400 step-by-step video tutorials & learn how to build your very own multi-channel software.

 

Forum Timezone: Europe/London

Most Users Ever Online: 1012

Currently Online:
63 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Jim @ Moogento: 688

Steve Froggatt: 514

Badeth - UE: 513

Jimbob: 453

Paul Cartwright: 414

Forum Stats:

Groups: 6

Forums: 37

Topics: 5222

Posts: 27488

Administrators: Matthew Ogborne: 4565, Dave Furness: 4606