10 replies [Last post]
roboy
roboy's picture
Offline
Regular
United States
Last seen: 5 years 29 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

I have been working with the developer code to change the code in a template that I like. There are 5 CSS stylesheets regulating the layout.

Using the developer tool I located the code I need to change. Huzzah! But when I click on the style locator tab in the upper right hand corner it does not take me there.

When I click on the triangle for  style type = text/css, I see underneath it, the code that I am trying to change.  What I can't figure out is where that code actually exists.  

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Look at the head element.

You will find the style elements. The HREF attribute will give you the uri of the external file.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roboy
roboy's picture
Offline
Regular
United States
Last seen: 5 years 29 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

Missing It Still

Gary,

When I look in chrome developer tool, I have this before my head element:  html class= "global xlarge" It seems to be, somehow, the root of my problem, because this is what happens when I look at the stuff in the head element.

The head says this:

<script src="js/jquery.min.js"></script>
		<script src="js/jquery.scrollzer.min.js"></script>
		<script src="js/jquery.scrolly.min.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-layers.min.js"></script>
		<script src="js/init.js"></script>
		<noscript>
			<link rel="stylesheet" href="css/skel.css" />
			<link rel="stylesheet" href="css/style.css" />
			<link rel="stylesheet" href="css/style-xlarge.css" />

OK, so far so good. And indeed, when I go into the skel.css style sheet I find the .container that I need. It says:

.container {
		margin-left: auto;
		margin-right: auto;
 
		/* width: (containers) */
		width: 45em;

But if I change it in the actual style sheet, it does not effect the html.

So that's when I go diving into developer tool, look in the head and find

<style type="text/css">

When I click the triangle, I get this text underneath:
 .container{margin-left:auto;margin-right:auto;width:45em}.container.\31 25\25{width:100%;max-width:56.25em;min-width:45em}.container.\37 5\25{width:33.75em}.container.\35 0\25{width:22.5em}.container.\32 5\25{width:11.25em}

And so there it is again, the container code that I want to change. In the bottom of the console it tells me that this is html.global.xlarge.

In the right window of the console it tells me the style is "inherited from html.global.xlarge"

But when I go into the xlarge.css file, all I can see is this:

#main > section > .container {
		padding: 4em 0 2em 0;
	}

I just can't figure out where the actual "container" code that is setting these dimensions is. I can change it in the developer tools and get what I want, but I can't make the actual change in the style sheets and have it work.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 5 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

very simple solution

The solution is very simple in the latest chrome or mozilla browsers :

Step One :

1. Decide which element you want to modify , right click on it and choose inspect element , the dev tools pops up.

2. in the left or smtime bottom of the dev tools , you'll see the styles applied to that particular element in all the style sheets I.E you'll see all the styles inherited from all style sheets by this element .

3. towards the left of each defined style you'll see the exact "style sheet name" and the "exact line" on which this style definition is .

4. decide which style of the elemet you'd like to modify , open the particular stylesheet and go modify the style .

wish this forum had an option to add attachments directly into answers .... requesting feature.

HTH.

Gautam.

roboy
roboy's picture
Offline
Regular
United States
Last seen: 5 years 29 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

Runs me in circles

Gautam,

Following your instructions to the letter. Developer tools still brings me back to the <style type="text/css"> part. It's telling me that it's in the head, and that it is coming from "html.global.xlarge" . But as I say, xlarge.css has no code with respect to "container". The only container code is in skel.css, and changing that does not have an impact.

Can I send you a url so you can see what I'm talking about?

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 5 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

roboy

it wld be better if you can post the URL here however if u ping it to me , i'll post the solution on the forum , right here .

roboy
roboy's picture
Offline
Regular
United States
Last seen: 5 years 29 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

URL

Yes, that's what I meant really--is it ok to post the url. So here it is:

http://vrocchio.net/up2/index.html

Very much looking forward to enlightenment. I've worked on this for days. It's just one level beyond what I can figure out. Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Typical WP theme silliness

The style elements(5) do not appear in the original source code. They appear to be generated by javascript; and no, I'm not opening that can of worms. With javascript disabled, the page is barely usable. That's what you call a fatal web error.

Try this:

Immediately before the closing tag for the head element add this code,

<style type="text/css">
.container {
  border: 2px solid red;
  }
</style>
I used the border property because it is obvious. Use the properties you want to edit.

I cannot say enough about the moronic coding of this page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roboy
roboy's picture
Offline
Regular
United States
Last seen: 5 years 29 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

Me Too

Gary,

Thanks! I'm glad I'm not the only one that thinks this template is full of it. I tried your suggestion, it didn't work. I'm just going to abandon it. I like the design and all, but no template is worth this much grief.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Worked for me

Bad syntax. Look at mine:

<style type="text/css">
.container {
  margin-left: 15%;
  margin-right: 10%;
  width: 85%;
  }
</style>

No equal sign; use a colon.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roboy
roboy's picture
Offline
Regular
United States
Last seen: 5 years 29 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

JS it is

Gary,

I took a chance based on what you said and found a line in a java script file. I changed it and voila! the problem was gone.

I'm still glad its not me who thinks this coding was overly complicated for what is in fact a fairly simple design. Ugh!

Thanks again.