Online store problems please help !! continued

  • 1
  • Question
  • Updated 6 years ago
  • Answered
continued
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like

Posted 7 years ago

  • 1
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Yes done that :-)
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Ha ha i see what to now ! ,,,,,think i have sussed it ! lol
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
In the far right hand panel you will find a code:

ecwid-productBrowser-productNameLink a:visited {
color: #413124;
}
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like


well i have changed it by doing it on the website itself now i need to change it on the editor lol
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's good. See below
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Copy this into Notepad. Edit the hexcode to #ffffff
.
Go into your online store. system settings>design
Now you have to create a new theme, using the default but name it "mjs theme"
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
which bit do i copy the stuff in the larger box on left or the smaller one on right?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
all of it?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
No.

ecwid-productBrowser-productNameLink a:visited {
color: #ffffff;
}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Now follow the Ecwid tut
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
i just done what it says and paste the code into the box and it doesnt change anything even after i activate it?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. Try this then.

Open your default theme.

Copy all of it into Word

Save it safely

Now this is a little different.

You will see in the left panel when you click on the inspect function the specific details of the currently slected product.

At the top of this is a class. Click on this and it changes to a horizontal listing but tends to roll out of the panel.

Copy this horizontal listing.

Go into your word document and do a find

Then copy the relevant code into Notepad.
Edit the colour code.
Copy it and paste it into your new theme. Save.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Oooops didnt see the save button at the top lol...:-)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It's all learning. Well caught.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Do you have Skype?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Made progress ! lol
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Think i finally understand this and how it works ! thankyou for all your help !
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Well done and congrats. Sorry for the delayed response had to go out for a while.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Looks very good Justin.

When you get around to it, remove the "View as Grid" and change the "Sort" colour.

"View as Grid" is not important with the Yola version because at this time it can't be changed by the user and the black printing may confuse.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Hi Gop how do i do that?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
i have changed the colour but how do i remove the view as grid?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi justin,

I think you have achieved great things with the customising of your store.

It's important to take these following code snippets through Notepad first to strip GS formatting code from the statements

To remove the View as links, add this code to your custom theme CSS:

div.ecwid-results-topPanel-viewAsPanel {
display:none !important;
}


Here's another little gift for you: (Take it or leave it)

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Thankyou !!! where do i paste this code is there a specific place for it to go or do i just past into the top box of the 2 on the design section of advanced settings at the top?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
In the same box as the rest of your customising code.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Hi Gop,

I have managed to accomplish that ! i have no idea what that large section of code does but it has been pasted lol :-)

Thankyou :-)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Great.

Just browse (mouseover) your products and you will see what happens.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
The description appears by the mouse cursor :-)
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
I have made another thread http://forum.yola.com/yola/topics/how... is this something you could possibly help me with?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That means you haven't copied all the code. Probably missing a /. or you didn't put it through Notepad.

Here it is again:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
oh ! i did put it in notepad first then copied it from notepad in to the css box? maybe i missed something i'll try again :-)
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
oh the images expand,,,that is cool !!!!!!!!!...thankyou :-)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes