Author Archives: Brenden Prazner

Submitting your websites sitemap in Google Webmaster Tools

2 Replies

An important part of ensuring a search engine like Google knows your website is to submit your sitemap to the search engine.

What is a sitemap?

First let’s explain how a search engine finds pages. Search engines find pages through links. It looks at a page and identifies all links on the page. Then it travels to that link which takes it to a new page. It then looks for links on the new page and once again travels down those links. This goes on and on and all the links are added to search engines directory.

Sometimes you may not link to all pages from your site so if a link to this page does not exist then a search engine like Google may not find it.

This is where a sitemap is handy!

A sitemap is a list of links or pages you have on your website. A search engine reads this sitemap and adds this URLs to their search directory.

In the case of DecoNetwork we provide an XML sitemap and you access this by adding /sitemap.xml at the end of your wesbite. i.e. http://www.yoursite.com/sitemap.xml

Adding your sitemap to Google

  1. Log into Google webmaster tools: www.google.com/webmasters/tools. If you don’t have a Google account then make one – it’s free! Don’t forget your gmail account is a Google account also.
  2. Log in to access your Webmaster Tools dashboard.
  3. Click the red “ADD A SITE“.
  4. Enter your websites URL such as http://www.yoursite.com
    Google will require you to verify your account. Select the “Alternate methods” to validate your account and select “HTML tag“
  5. Copy the <meta name… … … /> tag.
  6. Log into your DecoNetwork website and browse to Websites and select Manage for the site’s sitemap you wish to add to Google. Select Appearance and then Customize Template HTML.
  7. Select the Custom layout option from the left menu and then check “Override default layout“.
  8. You should past the <meta name… … … /> tag you copied above between the <head> and </head> tags in your website.
  9. Click Save when done.
  10. Return to Google Webmaster Tools and click the Verify button. If the tag was saved correctly your site should now be verified.
  11. Now you need to add your DecoNetwork sitemap. In Google Webmaster Tools browse to the left menu Optimization and select Sitemaps
  12. Select ADD/TEST SITEMAP.
  13. enter sitemap.xml at the end of your Add/Test Sitemap field and click Submit Sitemap.
  14. The sitemap may take a short while to submit and will remain in the Pending status until it is submitted. Once submitted it will give you a report of how many URLs (pages) were submitted and how URLs (pages) Google has indexed to its search engine.

Overtime you should see your indexed pages start to reach closer to you submitted pages as Google adds more of your pages to its search index.

 

 

Create a 301 permanent redirect in DecoNetwork

4 Replies

So you decided to move to DecoNetwork from another platform or solution…

andrew_awesomeBut you have some old page addresses and URLs that are nicely ranked in Google and you’re worried you’ll lose them if you move to a new solution…

andrew_bummerWell don’t worry! With DecoNetwork you can create your own 301 permanent redirect which will save your wonderful Google ranking.

What’s a 301 permanent redirect?

Let’s say you had an old website that had your designs on a page www.mysite.com/content/designs. When you move to DecoNetwork your designs page will be www.mysite.com/designs.

If you don’t tell Google and other search engines that your website page has moved correctly, the ranking that old page had may be lost and you’ll be starting again with the ranking of your new page.

That’s where a 301 redirect comes it. It is a server-side redirect which essentially tells Google and other search engines “this page has permanently moved so please update your URL database to point to the new URL”. The page is maintained in Google, but Google updates its database when it next visits your site.

How do you create a 301 redirect in DecoNetwork?

Super simple! Log into your DecoNetwork website and go to the Settings page for the website you want to manage (Websites > Manage > Settings).

Select URL Redirects and add a new redirect.

In the “URL” field enter your website path for your old folder or page excluding the actual URK. i.e. /content/designs/

In the “Redirect To” field enter the DecoNetwork page it should now point to, again excluding the actual URL. i.e. /designs

For example:

redirect_001

Then Save!

Pretty cool huh? Or as Andrew would say…

andrew_awesome

Come and see DecoNetwork @ the Printwear and Promotion exhibition

3 Replies

If you’re heading to the Printwear and Promotion exhibition at the NEC, Birmingham, UK drop by the DecoNetwork stand at H68.

3940.photo.1

We will be presenting a live theatre demonstration every hour or you can grab a member of our team for a one-on-one demonstration.

Visitor and registration information can be found at http://printwearandpromotion.co.uk/news/categoryfront.php/id/413/Visiting.html.

See you at the show!

Stop those annoying d… d… d… delayed images loading on mouse rollover

3 Replies

Do you sometimes use a different image on mouse rollover and get annoyed by the delay it takes for the mouse-over image to display on the first time you mouse over it? Well that’s caused by the image load time. You see, when you set a different image display by mouse over (or hover in CSS) the image is not loaded. It doesn’t load until you mouse over it so for a second or so the images loads, then it displays. Very annoying! It is easily fixed with a little HTML and CSS.

First an example with a simple div:

The HTML:

<div id="example1">
Text here
</div>

The CSS:

#example1 {
padding: 15px;
background:url("image1.png");
}

If image1.png was a red texture image my div area will be red with some text when there is no mouse cursor hovering over it. If I want to make the background blue then I could make a blue texture image and using :hover can force the display of the blue image. This can be done by adding some more CSS i.e.

The CSS:

#example1:hover {
background:url("image2.png");
}

Notice the :hover directly after #example? That tells the browser when you hover your mouse over the object with the ID “example1″ do the following. In this case, padding doesn’t change so I removed that kept the background and changes the image to image2.png

BUT, as stated above there will be a slight delay in the mouse over. Here is how you fix this.

Fixing the annoying d… d… delay

In your HTML (I prefer WAY down the bottom just before the </body> area load your image using a standard image tag however add a class “preloadimg”. i.e.

<img src="image1.png" class="preloadimg">
<img src="image1.png" class="preloadimg">

Then add the following to your CSS

.preloadimg {
display:none;
}

This will load your images at the bottom of your page (therefore making them loaded in the browsers cache) but then hide them from display (display:none;) so they are NOT displayed at the bottom of your page. However, as they are loaded in your brower’s cache they will appear immediately by time your visitor mouses over the object on your page.

So in summary, the full HTML and CSS for this example

The full HTML:

<div id="example1">
Text here
</div>

<img src="image1.png" class="preloadimg">
<img src="image2.png" class="preloadimg">

The full CSS:

#example1 {
padding: 15px;
background:url("image1.png");
}
#example1:hover {
background:url("image2.png");
}
.preloadimg {
display:none;
}

Simple, but it works.

Creating a single product information tab

4 Replies

As you know in DecoNetwork, when you view a product it has several tabs:

  • Color / Sizes
  • Description
  • Sizing
  • Shipping

They appear as a single tab each and a consumer on your site will need to click each tab to see the details.

tab_multiple

Some people prefer this information to be all on one tab, and this is easily achieved with a little CSS. Add the following CSS to your DecoNetwork website under Websites > Manage a site > Appearance > Customize Template CSS:

#tab_button_details, #tab_product_details, #tab_button_sizing, #tab_button_shipping {
display:none;
}

#tab_product_details, #tab_product_description, #tab_product_sizing, #tab_product_shipping {
display:block!important;
}

tab_one
Essentially the CSS hides all other tab links except “Description” and forces the display of all tab content areas. You can play around with the CSS to force or hide display of different tabs and tab links yourself. For example, you may not want the sizing chart to be displayed in the main tab therefore your CSS would look like:

#tab_button_details, #tab_product_details, #tab_button_shipping {
display:none;
}

#tab_product_details, #tab_product_description, #tab_product_shipping {
display:block!important;
}

Play around and display the tabs as you want!

How to create the Instagram effect in Corel PHOTO-PAINT

Leave a reply

Our recent inclusion of the Instagram feature in our online designer has created a lot of talk and hype around Instagram in the DecoNetwork community. It also raised the question ‘how do I make the Instagram effect without using Instagram?’

First of all, what is the Instagram effect? Instagram is famous for its image filters that talk a new photo and make it look old! It adds a classic vintage look which people love and can actually make a fairly standard photo look beautiful.

Here is a step-by-step guide on how to make apply an Instagram effect to a photo using Corel PHOTO-PAINT.

1. Start with a photo

Pick a photo you want to ‘Instagram’. I’ve picked one of my daughter with her pre-school sweetheart.

inst-001

Square it off!

A part of the vintage look of photos is their shape. All the old pics your folks have in their albums are square! So step one is to make your image square.

In Corel-PHOTO PAINT use the Crop Tool (D shortcut) and holding down the CTRL key draw the square around your image and this will create a preview of the area that will be cropped. When done double-click you square crop shape and the image will be cropped.

inst-002

Adjust your image tones

Now for the images color. We achieve the Instagram effect by adjusting the images color tones for the RGB, R, G and B tone curves. To do this:

In Corel PHOTO-PAINT go to Adjust > Tone Curve

Reset your Tone Curve dialog and ensure you have Curve set as your Curve option:

inst-002

Next you need to adjust each channel one at a time. Starting with the “RGB” channel then adjusting separately the “R” (red), “G” (green) and “B” (blue).

You will need to do this by eye so as best as possible reproduce the same curves I have created below. To help understand the adjustment I have included the original line in my images below so you can see each adjustment and how it compares to the original.

inst-003

inst-004

inst-005

inst-006You may need to adjust your curve slightly but if you follow this general guide you’ll get the color effect you want for the Instagram effect which is an exaggeration of colors in the channel. I typically find if your photo contains a lot of green and blue these are highlighted. If it contains a lot of yellow and red then these are highlighted.

inst-002b

Vignette it!

A vignette is a darkening of the edges of an image. Again, common in old photos!

I prefer to make this on a copy of the current photo so open your Objects docker (Window > Dockers > Objects (Ctrl+F7).

Select the photo in Object list and right click and select Duplicate Selected. This will make a copy of the photo. With the copy selected to go Effects > Creative > Vignette…

Use:

  • Color: Black
  • Shape: Circle
  • Adjust Offset: Maximum it allows
  • Adjust Fade: Maximum it allows

inst-007

I find the result to be a little too dark than I like, and this is why I create it on a duplicate layer. I then select that duplicate layer and using the Object Transparency tool I apply a Flat transparency of 50%:

inst-008

inst-009

inst-010

Blurring the edges

The final step is blur the edges of the photo. I find the easiest way to do this in Corel PHOTO-PAINT is to duplicate the image and apply a Gaussian Blur (Effects > Blur > Gaussian Blur) to the image. This will blue the entire image which of course we don’t want! With the duplicated blurred layer only selected use the Transparency Tool  (as above) however instead of using Flat change it to Radial.

Make sure you set the center transparency color to white making it 100% transparent and the outer transparency color to be a dark grey or black, depending how blurry you want your image edge to be. You should also adjust your mid-point slider to be closer to the grey or black end of the transparency as this will give a clearer center of the image and a blurry edge.

inst-011

Have some fun making your own Instagram effect images!

inst-012