Various CSS Questions

Shadow_Wolf

Joined: 2004-04-03
Posts: 181

Posted: Sat, 2005-04-02 02:20

I'm starting to get the hang of the CSS. There are still some things that I'm having trouble with. I've noticed that with an embedded page I've had to figure out which styles to use to give the same effect as stand alone G2. One of the things I'm having trouble working with is the picture frames.

Embedded URL: http://www.protoculturex.com/test/index.php?ind=private
Stand-Alone URL: http://www.protoculturex.com/test/gallery2

If you notice by going to the Stand-Alone URL that it is using shadows and the images are centered. Originally I got the embedded to center using:

.giAlbumCell {
    text-align: center;
}

Now that I've tried to use the frames the center alignment no longer works. Not to mention the frames aren't showing up. When I'm viewing the Stand-Alone in Firefox I pulled up the .css and usually I can just C&P that into my Embedded stylesheet. I tried that with the frames but that didn't seem to do any good. Am I using the wrong style code for it?

img.ImageFrame_image { border: medium none ; vertical-align: bottom; }
table.ImageFrame_shadow { direction: ltr; }
table.ImageFrame_shadow .RRT { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/RRT.png) no-repeat scroll 0%; height: 10px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }
table.ImageFrame_shadow .RR { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/RR.png) repeat-y scroll 0%; width: 7px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }
table.ImageFrame_shadow .RR div.V { width: 7px; }
table.ImageFrame_shadow .BBL { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/BBL.png) no-repeat scroll 0%; width: 9px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }
table.ImageFrame_shadow .BB { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/BB.png) repeat-x scroll 0%; height: 7px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }
table.ImageFrame_shadow .BR { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/BR.png) no-repeat scroll 0%; width: 7px; height: 7px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }
table.ImageFrame_shadow td { font-size: 1px; }
td div.H { width: 1px; height: 0pt; }
td div.V { width: 0pt; height: 1px; }

The text for the Previous and Next, what css is used for it, is that abNavBar?

mindless

Joined: 2004-01-04
Posts: 8601

Posted: Sat, 2005-04-02 03:07

why are you copy/pasting css instead of using what G2 tells you it needs? (returned in headHtml from embed api...)

Shadow_Wolf

Joined: 2004-04-03
Posts: 181

Posted: Sat, 2005-04-02 04:14

Because I don't know know and understand what you are talking about.

mindless

Joined: 2004-01-04
Posts: 8601

Posted: Sat, 2005-04-02 16:01

from docs/EMBEDDING, which i assumed you've read..

Quote:

$g2data = GalleryEmbed::handleRequest();
if ($g2data['isDone']) {
exit; // G2 has already sent output (redirect or binary data)
}

// Use $g2data['headHtml'] and $g2data['bodyHtml']
// to display G2 content inside embedding application

Shadow_Wolf

Joined: 2004-04-03
Posts: 181

Posted: Sat, 2005-04-02 17:45

Yes I've read docs/embedding multiple times. However I am not a programmer so I don't fully understand all of it. Not to mention $g2data['headHtml'] does not work. I however got it to work with {$data['css']}.

One of the main reasons for my C&P all the .css into one style sheet was so I had greater control and understanding of the .css used. Between the portal, website, gallery, arcade, comic management system, and games there are a lot of .css files. By having everything centralized into a couple .css allows me easier ability to edit. Not to mention G2 utilizes .css is both themes and layouts and espcially when learning which items effect what and do what, it becomes time consuming to have to edit, upload, switch directories then refresh to see what was effected. When it is easier to have a centralized .css, edit, upload, refresh and not needing to navigate between multiple directories.

Currently by using {$data['css']} it is not located in the <head of my document because there isn't a way to do that in the current module that I'm using. I'm not sure how validation will handle that but I haven't gotten to that point yet. Not to mention not all programs that G2 gets embedded in would let them load an outside .css without editing its own source-code as well. G2 is being designed with the intent to do no modifications to its own code, so that when updating those changes won't need to happen again. In the same aspect other programs shouldn't have to be modified in order to have to be modified to call upon functions in G2. A lot of modifications to my page is done through the .css. If I modify the portal to also include G2's .css in its head then then when I upgrade that part I would also again have to re-edit those sections to allow it to utilize G2s css within itself. That is why I have everything in seperate stylesheet, then after upgrades I just need to modify the .css path without having to worry about re-linking multiple .css or modifying it so it is able to call upon $g2data['headHtml'].

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Sat, 2005-04-02 18:00

1. GalleryEmbed::init
2. $data = GalleryEmbed::handleRequest();
3.

    if (isset($g2moddata['headHtml'])) {
      list($title, $css, $javascript) = GalleryEmbed::parseHead($g2moddata['head
Html']);
    }

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Sat, 2005-04-02 18:16

- a single css file is for most bigger projects to unflexible. usually, the problem is split up into some smaller problems. layout isn't the same as theme. it's good to be able to change them independently.

- a single css file for G2 and the application it is embedded in is by far the most inflexible approach. what if the layout/theme of the cms is changed? what if the G2 layout/theme is changed?

Not to mention not all programs that G2 gets embedded in would let them load an outside .css without editing its own source-code as well. G2 is being designed with the intent to do no modifications to its own code, so that when updating those changes won't need to happen again. In the same aspect other programs shouldn't have to be modified in order to have to be modified to call upon functions in G2.
We spent a lot of time designing the G2 integration. And what you describe is exactly our goal. Neither G2, nor the other application should be manipulated when integrating G2 in another application. embed.php is the wrapper/entry point of G2, similarely the other application needs a wrapper/module that feeds G2 with the data it needs, and takes G2s output and outputs it somehow.

But the other application (lets call it emApp) has to feature a minimum set of functionality to be able to integrate G2 without making changes to emApps core code. Adding additional css/javascript to the <head> part of the generated pages is one of these features. Modern CMS have this feature.
In less powerful emAPPs, you have the choice:
a) Is this emApp only used by you? Then why hesitate? Change it to accept additional css/javascript dynamically.
b) Is the emApp widely used, something like phpnuke, but not well designed? Ask the developers of emApp to add this functionality. Or hack your install of emApp.
c) Copy the css files from G2 or their contents and package it with your integration code. Or copy the css code from the files to the css files of the emApp.
d) various other possibilities.

Bottom line:
We can only offer the service of setting the css/javascript/... dynamically. You don't have to use it. You can choose a less flexible approach of setting css/javascript and lose some functionality like setting the layout/theme in G2 site admin, but it is your choice.

Shadow_Wolf Joined: 2004-04-03 Posts: 181	Posted: Sat, 2005-04-02 02:20
	I'm starting to get the hang of the CSS. There are still some things that I'm having trouble with. I've noticed that with an embedded page I've had to figure out which styles to use to give the same effect as stand alone G2. One of the things I'm having trouble working with is the picture frames. Embedded URL: http://www.protoculturex.com/test/index.php?ind=private Stand-Alone URL: http://www.protoculturex.com/test/gallery2 If you notice by going to the Stand-Alone URL that it is using shadows and the images are centered. Originally I got the embedded to center using: .giAlbumCell { text-align: center; } Now that I've tried to use the frames the center alignment no longer works. Not to mention the frames aren't showing up. When I'm viewing the Stand-Alone in Firefox I pulled up the .css and usually I can just C&P that into my Embedded stylesheet. I tried that with the frames but that didn't seem to do any good. Am I using the wrong style code for it? img.ImageFrame_image { border: medium none ; vertical-align: bottom; } table.ImageFrame_shadow { direction: ltr; } table.ImageFrame_shadow .RRT { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/RRT.png) no-repeat scroll 0%; height: 10px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; } table.ImageFrame_shadow .RR { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/RR.png) repeat-y scroll 0%; width: 7px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; } table.ImageFrame_shadow .RR div.V { width: 7px; } table.ImageFrame_shadow .BBL { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/BBL.png) no-repeat scroll 0%; width: 9px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; } table.ImageFrame_shadow .BB { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/BB.png) repeat-x scroll 0%; height: 7px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; } table.ImageFrame_shadow .BR { background: transparent url(http://www.protoculturex.com/test/gallery2/modules/imageframe/frames/shadow/BR.png) no-repeat scroll 0%; width: 7px; height: 7px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; } table.ImageFrame_shadow td { font-size: 1px; } td div.H { width: 1px; height: 0pt; } td div.V { width: 0pt; height: 1px; } The text for the Previous and Next, what css is used for it, is that abNavBar?
	XUser login Username: * Password: * Create new account Request new password
mindless Joined: 2004-01-04 Posts: 8601	Posted: Sat, 2005-04-02 03:07
	why are you copy/pasting css instead of using what G2 tells you it needs? (returned in headHtml from embed api...)

Shadow_Wolf Joined: 2004-04-03 Posts: 181	Posted: Sat, 2005-04-02 04:14
	Because I don't know know and understand what you are talking about.

mindless Joined: 2004-01-04 Posts: 8601	Posted: Sat, 2005-04-02 16:01
	from docs/EMBEDDING, which i assumed you've read.. Quote: $g2data = GalleryEmbed::handleRequest(); if ($g2data['isDone']) { exit; // G2 has already sent output (redirect or binary data) } // Use $g2data['headHtml'] and $g2data['bodyHtml'] // to display G2 content inside embedding application

Shadow_Wolf Joined: 2004-04-03 Posts: 181	Posted: Sat, 2005-04-02 17:45
	Yes I've read docs/embedding multiple times. However I am not a programmer so I don't fully understand all of it. Not to mention $g2data['headHtml'] does not work. I however got it to work with {$data['css']}. One of the main reasons for my C&P all the .css into one style sheet was so I had greater control and understanding of the .css used. Between the portal, website, gallery, arcade, comic management system, and games there are a lot of .css files. By having everything centralized into a couple .css allows me easier ability to edit. Not to mention G2 utilizes .css is both themes and layouts and espcially when learning which items effect what and do what, it becomes time consuming to have to edit, upload, switch directories then refresh to see what was effected. When it is easier to have a centralized .css, edit, upload, refresh and not needing to navigate between multiple directories. Currently by using {$data['css']} it is not located in the <head of my document because there isn't a way to do that in the current module that I'm using. I'm not sure how validation will handle that but I haven't gotten to that point yet. Not to mention not all programs that G2 gets embedded in would let them load an outside .css without editing its own source-code as well. G2 is being designed with the intent to do no modifications to its own code, so that when updating those changes won't need to happen again. In the same aspect other programs shouldn't have to be modified in order to have to be modified to call upon functions in G2. A lot of modifications to my page is done through the .css. If I modify the portal to also include G2's .css in its head then then when I upgrade that part I would also again have to re-edit those sections to allow it to utilize G2s css within itself. That is why I have everything in seperate stylesheet, then after upgrades I just need to modify the .css path without having to worry about re-linking multiple .css or modifying it so it is able to call upon $g2data['headHtml'].

valiant Joined: 2003-01-04 Posts: 32509	Posted: Sat, 2005-04-02 18:00
	1. GalleryEmbed::init 2. $data = GalleryEmbed::handleRequest(); 3. if (isset($g2moddata['headHtml'])) { list($title, $css, $javascript) = GalleryEmbed::parseHead($g2moddata['head Html']); }

valiant Joined: 2003-01-04 Posts: 32509	Posted: Sat, 2005-04-02 18:16
	- a single css file is for most bigger projects to unflexible. usually, the problem is split up into some smaller problems. layout isn't the same as theme. it's good to be able to change them independently. - a single css file for G2 and the application it is embedded in is by far the most inflexible approach. what if the layout/theme of the cms is changed? what if the G2 layout/theme is changed? `Not to mention not all programs that G2 gets embedded in would let them load an outside .css without editing its own source-code as well. G2 is being designed with the intent to do no modifications to its own code, so that when updating those changes won't need to happen again. In the same aspect other programs shouldn't have to be modified in order to have to be modified to call upon functions in G2.` We spent a lot of time designing the G2 integration. And what you describe is exactly our goal. Neither G2, nor the other application should be manipulated when integrating G2 in another application. embed.php is the wrapper/entry point of G2, similarely the other application needs a wrapper/module that feeds G2 with the data it needs, and takes G2s output and outputs it somehow. But the other application (lets call it emApp) has to feature a minimum set of functionality to be able to integrate G2 without making changes to emApps core code. Adding additional css/javascript to the <head> part of the generated pages is one of these features. Modern CMS have this feature. In less powerful emAPPs, you have the choice: a) Is this emApp only used by you? Then why hesitate? Change it to accept additional css/javascript dynamically. b) Is the emApp widely used, something like phpnuke, but not well designed? Ask the developers of emApp to add this functionality. Or hack your install of emApp. c) Copy the css files from G2 or their contents and package it with your integration code. Or copy the css code from the files to the css files of the emApp. d) various other possibilities. Bottom line: We can only offer the service of setting the css/javascript/... dynamically. You don't have to use it. You can choose a less flexible approach of setting css/javascript and lose some functionality like setting the layout/theme in G2 site admin, but it is your choice.

Various CSS Questions

XUser login