Comic Fury Webcomic Hosting - Layout design guide

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Layout design guide
Pages: [1] [3] [4] [5] [6] [7] [8]

16th Feb 2011, 2:26 AM #141
EandN

Posts: 16
Referrals: 0
Registration date: 31st Jan 2011
Cyborg_572:

Probably should have started you own thread for this, but anyway, go to the management screen for your comic, find the "edit layout html" link, and start editing the "overall" seciton. Near the bottom of the page, where ever you want the link to be, add
<a href="http://twitter.com/youUsername">Link Text</a>
You might have to edit the CSS to get it to look right, but that's a bit beyond the scope of what I can cover here.


Thanks so much! I thought of starting a new thread but wasn't sure what the etiquette round these parts is...some forums get super dicky if you start a new thread. Thanks again for the help though!
8th Apr 2011, 12:07 PM #142
Biophysicist♂

User avatar
Posts: 1293
Referrals: 0
Registration date: 13th Oct 2010
According to Kyo, there is an undocumented code: [nextcomictitle]. Really useful for MSPA-esque stuff.

EDIT: I'm using it in Crusade, so I know it works and stuff.
_______________________
Prepare for immediate starburst!
13th Apr 2011, 7:53 PM #143
dedicatedfollower467♀

Posts: 42
Referrals: 0
Registration date: 12th Apr 2011
Okay, I'm going to sound like a newbie, but all I really want is to change the background color (which is currently black and far too dark for my theme). I don't need a bunch of crazy stuff - I think I can figure out how to do banners/etc. on my own, but I need a green where I currently have black. It's driving me nuts, any idea how to help?

It's here
_______________________
image
13th Apr 2011, 9:38 PM #144
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
look for
body{
    ... bunch of stuff
    background-image: url("http://comicfury.com/images/layouts/bggrad.png");
    ... bunch more stuff
}


and delete the line with the image.

Also, can people please use this thread for discussing issues with the guide, and make new threads for layout issues?
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
26th Jun 2011, 6:09 PM #145
Aethix♂

User avatar
Posts: 186
Referrals: 0
Registration date: 20th Apr 2011
Location: United States
I found an issue in the Tips and Tricks section of the guide. In the Simple Inline Comments section of the page, the id given to the iframe is "commentFrame". However, in the Advanced Inline Comments section, the id you have next to the hash symbol is "frame", which causes the script to not work when copied and pasted from the guide.

On an unrelated note, I've found that [addsubscriptionlink] is a global variable.
26th Jun 2011, 7:09 PM #146
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
all variables that work in the wraparound are global, by design.
_______________________
hello
28th Jun 2011, 2:12 AM #147
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I've got updating the entire It Figures site, guide included, nestled in the recesses of my todo list, but right now the thing at the top of my todo list is getting to a state where a todo list is useful :P
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
4th Jul 2011, 2:26 AM #148
Aethix♂

User avatar
Posts: 186
Referrals: 0
Registration date: 20th Apr 2011
Location: United States
I think I may have found another issue with the tips and tricks section over the course of messing with my layout. Specifically with the rating stars. The [ratingpercentage] variable, from what I can tell, treats a rating of 5 stars as 100%, a rating of 4 stars as 75%, a rating of 3 stars as 50%, a rating of 2 stars as 25%, and a rating of 1 star as 0%. If I'm right, the stars from the guide will give a slightly inaccurate rating if it isn't all 5 stars for a comic, which seems to be the case for me. I can't think of any workaround.
7th Jul 2011, 12:22 AM #149
Aethix♂

User avatar
Posts: 186
Referrals: 0
Registration date: 20th Apr 2011
Location: United States
Apologies for the double post, but I've come up with a workaround for the rating stars issue I mentioned in my previous post. It is kind of hacky, but here's the markup I used:

7th Jul 2011, 1:37 AM #150
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
Yeah, the math for getting rating percentages has some weird weighting to it that ultimately makes sense, but doesn't work well for this kind of display.

The original version of this tutorial used EM units. At the time I didn't really understand them enough and it was hard to control. Since then I've figured it out a bit better and you can see em-based stars on layouts here I've worked on (such as RPGeneric).

The basic idea is that instead of using percentages, you set the font-size to the width of one of your starts, then 1em = the width of one star, so you just have to set the width to [rating]em and it all works perfectly.

At some point before summer's out, I'll be re-vamping the It Figures site, and that includes updating all the tutorials in the guide.

Also, [f:stars] is the old file syntax, it's /files/stars.png now
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
"Save place/Bookmark buttons for your comic", 14th Sep 2011, 7:26 PM #151
JustNoPoint♂

User avatar
Posts: 1225
Referrals: 0
Registration date: 17th Apr 2011
Location: Judsonia AR
<script language="javascript" type="text/javascript">/*
JavaScript Bookmarking Script
=============================
Developed originally for easy reading of webcomics :D
Feel free to use this script in anyway you see fit,
as far as I am concerned and aware the below code 
is copyright free.

Script Author: Ash Young
Email: ash@evoluted.net
Website: http://evoluted.net/

Default Graphics: Pontus Madsen
Website: www.little-gamers.com
*/

/*
Config Settings
*/
var cl = 31;
var imgTag = '/1.gif';		//add tag image.
var imgClearOff = '/3a.gif';	//no comic tagged, clear not possible
var imgGotoOff = '/2a.gif';	//no comic tagged, goto not possible
var imgClearOn = '/3.gif';	//clear a tag, shows when comic previously tagged
var imgGotoOn = '/2.gif';	//shows when a comic is tagged  
var comicDir = '/'; 		//alter this if you run multiple comics in differnt directorys on your site.

/*
Now write out the applicable links
*/
createCookie('t', 1);
var c = readCookie('t');
if(c && document.getElementById) {
	var l = readCookie('bm');
	var gt = imgGotoOff;
	var ct = imgClearOff;
	if(l) {
		gt = imgGotoOn;
		ct = imgClearOn;
	}
	document.write('<a href="#" onClick="bm();return false;"><img src="'+imgTag+'" alt="Tag This Comic" border="0"></a>');
	document.write('<a href="#" onClick="gto();return false;"><img src="'+gt+'" alt="Goto Tag" border="0" id="gtc"></a>');
	document.write('<a href="#" onClick="bmc();return false;"><img src="'+ct+'" alt="Clear Tag" border="0" id="rmc"></a>');
	document.write('<a href="#" onMouseOver="document.getElementById(\'bmh\').style.visibility=\'visible\';" onMouseOut="document.getElementById(\'bmh\').style.visibility=\'hidden\';" onClick="return false;"><img src="'+imgInfo+'" alt="" border="0"></a>');
	document.write('<div id="bmh" style="padding:4px; font-size:small;margin-left:5px;margin-top:20px;font-family:Arial, Helvetica, sans-serif;position:absolute;width:250px;background-color:#EDEDED;border: 1px solid #CFCFCF;visibility:hidden;text-align:left;"><Strong>What is this?</strong><Br><Br>This feature allows you to remember how far you got reading this comic. <br><br>All you have to do is hit \'Tag This Comic\' and next time you return to the site you can easily keep reading from where you left off.<br><br>Pretty good if you are reading through the archives, or if you only visit the site once every now and then..</div>');
}

/*
Below are our functions for this little script
*/
function bm() {
	if(document.getElementById) {
		document.getElementById('gtc').src = imgGotoOn;
		document.getElementById('rmc').src = imgClearOn;
	}
	createCookie("bm", window.location, cl);
}

function bmc() {
	if(document.getElementById) {
		document.getElementById('gtc').src = imgGotoOff;
		document.getElementById('rmc').src = imgClearOff;

	}
	createCookie("bm","",-1);
}

function gto() {
	var g = readCookie('bm');
	if(g) {
		window.location = g;
	}	
}

/*
The follow functions have been borrowed from Peter-Paul Koch.
Please find them here: http://www.quirksmode.org
*/
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	} else var expires = "";
	document.cookie = name+"="+value+expires+"; path="+comicDir;
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}</script>


I didn't know if this was supposed to go here in this sticky or if I am to start a new thread/sticky for simple code snippets like this.

I will add the coding for giving commenters an avatar if they don't have one and embedding the comment box within the comment area later on.
_______________________
14th Sep 2011, 8:04 PM #152
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
probably better to make a thread for it
_______________________
hello
12th Oct 2011, 12:10 AM #153
LauraEss♀

User avatar
Posts: 3621
Referrals: 0
Registration date: 27th Feb 2011
Location: Barnsley, NSW, Australia
Cyborg_572:I don't know if what I wrote qualifies as a tutorial or not, but it should be helpful, I think. It's nowhere near being completely done, but it's usable. I posted it on this page of my comic. I also have a standalone html copy of it.
It's very useful to me. I've taken the liberty of collecting all that into an MS Word document (which I shall be printing today). I corrected the odd spelling mistake, formatted it a bit and generated a table of contents. Uploaded a PDF version as well, just in case others might want this.

_______________________
--
Laura Ess
image
13th Oct 2011, 12:05 AM #154
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I feel compelled to remind you that the guide is out of date. Mostly it's missing some of the newer tags and conditions, along with the javascript files you can include, but one big thing to note is that the way extra files works has completely changed since then. The [f:x] tags are gone now.
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
13th Oct 2011, 9:11 AM #155
LauraEss♀

User avatar
Posts: 3621
Referrals: 0
Registration date: 27th Feb 2011
Location: Barnsley, NSW, Australia
Cyborg_572:I feel compelled to remind you that the guide is out of date. Mostly it's missing some of the newer tags and conditions, along with the javascript files you can include, but one big thing to note is that the way extra files works has completely changed since then. The [f:x] tags are gone now.
Time for an update then (version 1.1?)!

_______________________
--
Laura Ess
image
15th Nov 2011, 9:34 AM #156
Toluz Tamolipa

Posts: 2
Referrals: 0
Registration date: 2nd Nov 2011
Not sure if this is the place to post this question, but I'd be happy to relocate it if needed.

Noob here, and I've yet to find an answer on site to said question. Say you've uploaded an image and you've like to use it as a banner/title or the like. How is this done?

The image was loaded fine. I would think once you've found your way in the Comic Management section where one would scroll down to find the Webcomic Title/Banner settings editor and see a blank field titled "Background Image" all you'd need to do is, well, specify the image you want to use. But how? Is it in html? The image's given name when uploaded? Clicking on the field doesn't give you any options, which was my first instict. Is this an html issue that needs to be fixed there or...?

Any help would be appreciated.
15th Nov 2011, 9:39 AM #157
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
webcomic site/layout -> simple layout editor
_______________________
hello
15th Nov 2011, 6:56 PM #158
Toluz Tamolipa

Posts: 2
Referrals: 0
Registration date: 2nd Nov 2011
Ah, thanks for the response.

I keep snaking my way back into the simple layout editor, but I still can't figure out how to fill the empty "Background image" field. I guess that was my question, as how to do that.
"tags on extra pages?", 29th Feb 2012, 5:10 AM #159
rogan♂

User avatar
Posts: 256
Referrals: 0
Registration date: 14th Mar 2011
Location: Santa Rosa
umm... I'm trying to make an extra page that uses comicfury tags... they don't get processed. Am I missing something?
_______________________
Comics Sans is like poo on a stick! It stinks, but it's fun to wave in front of squeamish people!

| | press f5: see an updated drawing here! If it's after 10 pm pacific,
V I've probably updated the image! PRESS F5!
image image
29th Feb 2012, 5:38 AM #160
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
please make a seperate thread for that problem.

also in that thread list the tags you have been trying to use (which would have been my question)
_______________________
hello
Forum > Layouts, HTML, CSS & Javascript > Layout design guide
Pages: [1] [3] [4] [5] [6] [7] [8]