Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   Resizing of graphic elements (http://forum.bytesforall.com/showthread.php?t=23343)

nesdon Dec 3, 2015 12:35 PM

Resizing of graphic elements
 
I am using 3.7.10 for allpowerlabs.com. I'm getting some comments that some of the images overrun the center column content area in some screen resolutions. I returned the "overall style and config" layout to 99% with no mins or maximums, which had been set to 1040 min and 1400 max, but still seem to have this behavior.

As I mentioned in the past, I am a designer not a coder who has taken over a highly customized site. From my limited knowledge of CSS, would expect this 99% to resize all content to whatever screen resolution of window sizing the viewer is using. What am I missing?

juggledad Dec 3, 2015 02:36 PM

Quote:

I'm getting some comments that some of the images overrun the center column content area in some screen resolutions.
It would be helpful if you would to point to some examples.

The layout width of 99% just says the page will use 99% of the browser window. Other CSS will set other constraints on other elements on the site.

nesdon Dec 3, 2015 08:27 PM

http://www.allpowerlabs.com/wp-conte...dth-screen.jpg

This is the html of that image:
<a href="http://www.allpowerlabs.com/carbon/gasification-biochar-carbon-negative-energy"><img class="aligncenter wp-image-11447" src="http://www.allpowerlabs.com/wp-content/uploads/2015/06/CarbonCycleIconsFlip.png" alt="carbon cycle" width="640" height="300" /></a>

As the wp media library does not offer any fluid settings, I assume the theme's general layout setting governs. I have not added any other variances to the css and the only entry in the "style images" section or the athalupa them options is: "padding: 10px;"

And these are the only CSS inserts:
" .soliloquy-container .soliloquy-pager-item {
border: 2px solid #808080 !important;
border-radius: 999em !important;
}
.soliloquy-container .soliloquy-pager-link {
background-image: none !important;
width: 7px !important;
height: 7px !important;
}
.soliloquy-container .soliloquy-pager-link:hover, .soliloquy-container .soliloquy-pager-link.active {
background-image: none !important;
background-color: #ff9900 !important;
}
ul{padding-left: 17px;}

h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
h2 { font-size: 18px; line-height: 1.3; margin: 1em 0 .2em; }
h3 { font-size: 14px; line-height: 1.3; margin: 1em 0 .2em; }
h4 { font-size: 19px; margin: 1.33em 0 .2em; }
h5 { font-size: 1.3em; margin: 1.67em 0; font-weight: bold; }
h6 { font-size: 1.15em; margin: 1.67em 0; font-weight: bold; }
#wpmtp-wrapper h3.wpmtp-post-title a {font-size:95%!important;font-weight:normal!important;}
div.post table tr.alt td {background: ffffff; }
<style type="text/css">iframe.goog-te-banner-frame { display:none !
important; }</style>
<style type="text/css">body {position: static !important; top: 0 !
important;}</style> "

Although I'm not sure what all that at the bottom is for.

juggledad Dec 4, 2015 06:31 AM

For what it's worth, I just copied your image into a site of mine and it resizes fine - the difference is I'm using Atahualpa 3.7.24

nesdon Dec 4, 2015 03:09 PM

I have regular backups with updraft so my data is safe, but the last upgrade I did from WP 3.x to 4.x crashed the site for a day or so and I had to pull in one of our software engineers to help get it back up, as we were both beyond our skillsets.

That's not much of a jump, and its just the theme, but one of the folks who originally developed the site told me the theme was heavily customized, although I have no idea if they just meant many mods to the configs (there are) or some deeper coding. Any idea what the chances are that that upgrade will cause me problems?

juggledad Dec 4, 2015 06:05 PM

Not many people edit the themes code because the options are so useful. there is rerely a need to do that.

But you never know. What I would do is download the theme folder to your PC and then download a fresh copy of the 3.7.10 version of the theme and do a comparison (TextWrangler on the mac allosw you to compare two fiolders for changes and all the content in the folders)

And as always, you should do a full backup of the site (database and all files) before upgrading. Also take a snapshot of all your widgets and their locations. Due to a wordpress requirement, a change was made in 3.7.24 which causes all the widgets to become inactive and you have to move them back to the widget areas they are currently in. You will see all the widgets in the 'inactive' section, so you just need to drag them back, just make sure you move the correct widgets to the correct widget area (thus the advice to tack some screen shots of the widget area as it currently exists)

nesdon Feb 3, 2016 08:30 PM

I'm back trying to tackle this issue. I have not updated to 3.7.24 form 3.7.10 as the theme listed on my site is a custom theme: apl04, and I'm not sure how to upgrade the base theme under it.

But the page below has two images that scale and two that don't, but I cannot figure out why. Maybe this is a clue?

http://www.allpowerlabs.com/carbon/natural-carbon-cycle

juggledad Feb 4, 2016 06:29 AM

The difference between the images that resize and the ones that don't is that the images that re-size have a class of 'size-full' assigned to them.

If you go to the page http://www.allpowerlabs.com/carbon and edit it with the text editor, find
HTML Code:

<img class="aligncenter wp-image-11447" width="640" height="300" alt="carbon cycle" src="http://www.allpowerlabs.com/wp-content/uploads/2015/06/CarbonCycleIconsFlip.png">
and change it to
HTML Code:

<img class="size-full aligncenter wp-image-11447" width="640" height="300" alt="carbon cycle" src="http://www.allpowerlabs.com/wp-content/uploads/2015/06/CarbonCycleIconsFlip.png">
and see what happens.

As to why the theme is called apl04 - beats me but maybe whoever installed it made some custom changes. The only way you will know is to copy that folder to your computer, get a copy of that version of the time and do a compare of the two folders/files to see the differences.

On the Mac there is a program 'TextWrangler' that will allow you to compare all the contents of two folders and it will show you the differences.


All times are GMT -6. The time now is 01:35 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.