Topic: Upgrade 1.3.5 to 1.5.1 pages different

Hello,

In Showkase version 1.3.5 -  I have login boxes nicely aligned and on a different page I have the Paypal donate button sized properly but in Showkase version 1.5.1 - the login boxes and its corresponding text are not aligned and on the other page, the Paypal donate button is enlarged and thus pixelated.

I copied/pasted the code from the Showkase version 1.3.5 site to the Showkase version 1.5.1 site, so I have no idea whats going on and how to fix this.

Please advise. Thanks.

Re: Upgrade 1.3.5 to 1.5.1 pages different

It is possible that between v1.3.5 and v1.5.1 some internal CSS values may have changed to fix certain layout issues and this may be adversely affecting your custom page.
Unfortunately, without seeing your website and the custom code that you are using, I cannot determine the cause of your problem.

Please post a link to the Showkase page which is causing the problem and also post the code that you are referring to (the code that you have copied from v1.3.5 to v1.5.1). I don't know if this is HTML code entered into the Showkase editor or CSS code entered into a theme's 'custom.css' file (or something else), but once I am able to see the problem for myself and the code that you are using, I should hopefully be able to help further. Thank you.

... the Paypal donate button is enlarged and thus pixelated.

This might be easily fixed by specifying dimensions ('width' and 'height' attributes) for the image to be displayed at within the dontate button's <img> tag.
For example:

<img src="image.png" width="100" height="50" alt="PayPal Donate Button" />

Re: Upgrade 1.3.5 to 1.5.1 pages different

Hi Steven,

Thanks for the help. I tried to post links and the code I'm using but I got this error message:

Warning! The following errors must be corrected before your message can be posted:
Too many links in message. Allowed 0 links. Reduce number of links and post it again.

Please advise.

In regards to changing the height and width of the Paypal button image, I've tried various numbers but none changed the image size on the web page.

I'm copying the codes from my service providers and pasting them into the "source" portion of the "Page content" area when making a page in Showcase. Everything looks fine in the "Page content" area but not in its own web page.

Thanks again for your continued support.

Re: Upgrade 1.3.5 to 1.5.1 pages different

I tried to post links and the code I'm using but I got this error message:

Warning! The following errors must be corrected before your message can be posted:
Too many links in message. Allowed 0 links. Reduce number of links and post it again.

I'm not sure exactly what you tried to post (perhaps your code has several links in it?) but it sounds like the forum's spam prevention has kicked in.

Try posting just the URL to your web page but disguise the URL like the following example:

www dot example dot com / index.html

That should at least allow me to view your web page.
Thanks.

Re: Upgrade 1.3.5 to 1.5.1 pages different

Ya, the code has url's in it too.

Here's the the link to my page with the misalignment issue: familyphotos dot newbiephoto dot net slash login

The password boxes and text should align like this: gymnastics dot newbiephoto dot net

Here's the the link to my page with the enlarged Paypal: familyphotos dot newbiephoto dot net slash home

The "Donate" button itself is supposed to be just slightly wider than the animated gif

Re: Upgrade 1.3.5 to 1.5.1 pages different

Many thanks for the links.

The login boxes and the donate button are all <input> elements and the Showkase CSS for <input> elements is being applied to your own <input> elements.


Login boxes:

Change your three <input> lines from:

<input type="text" name="uname" size="15" maxlength="30" style="width: 100px">
<input type="password" name="passwd" size="15" maxlength="30" style="width: 100px">
<input type="submit" name="submit" value="Login" style="width: 65px;">

... to:

<input type="text" name="uname" size="15" maxlength="30" style="width: 100px; display: inline !important;">
<input type="password" name="passwd" size="15" maxlength="30" style="width: 100px; display: inline !important;">
<input type="submit" name="submit" value="Login" style="width: 65px; display: inline !important;">

... (adding display: inline !important; to the 'style' attribute of each one).


Donate button:

Change:

<input alt="" border="0" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" />

... to:

<input alt="" border="0" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" style="width: auto !important;" />

... (adding a 'style' attribute with width: auto !important;).


You could add CSS classes or ids to each of your <input> tags and then add the required CSS rules in your theme's 'custom.css' file but as you would have to modify your custom code anyway (to add the classes or ids), the above suggestions might be the easiest to implement.

I hope this helps.

Re: Upgrade 1.3.5 to 1.5.1 pages different

Thank you, so much, Steven!!! All's good now.

Re: Upgrade 1.3.5 to 1.5.1 pages different

Spoke too soon...for some reason, the login boxes are misaligned again but I haven't touched the code since it was working last night. Please advise.

Re: Upgrade 1.3.5 to 1.5.1 pages different

It looks like you might have made the changes (added the necessary CSS rules) to the HTML files created by Showkase. These HTML files are regenerated each time you publish your site.
Instead, edit the pages in question within the Showkase interface and make the changes to the <input> tags in the text editor (where you first entered your custom code).
I hope this helps.

Re: Upgrade 1.3.5 to 1.5.1 pages different

Hi Steven,

Sorry for the delay, haven't had time to look into this until now. Anyways, the place I put the edits is, after logging in: I click "edit" to the page where the script is, then my I can see my "page" in the box (which has the "source" button). My page looks like it's supposed to here (all aligned nicely even before the edits).  I click the "source" button and enter the edits there.

Am I in the correct place to put the edits?

Thanks for the assist.

Re: Upgrade 1.3.5 to 1.5.1 pages different

Yes. That is the correct place to edit your code (in the page's text editor box in 'Source' mode).
Your page looks OK in the text editor because the CSS which is affecting the layout in the actual web pages is not being applied to your custom code in the text editor. (After making the edits in the text editor, your page should still look OK in the text editor. The edits just protect your code against certain CSS rules.)