Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[Sugarcube] Transferring Stylesheet from version 1 to Sugarcube 2.0

Hello all!

So this has been a problem that's been in my crosshairs for a while, but seeing as how (for me at least) it's not been a gnawing, pressing or detrimental problem I've been putting it off to rectify other issues.

I believe that now is a good time to address this however.

I am not entirely sure of the benefits of using Sugarcube 2.1.2 (my current version) over 1.0.26, but as of now I am having a modicum of trouble with my current version, as the format of the stylesheet seems to be somewhat different for both (the colours remain but everything else is different).

I really like the look of the sidebar and the general UI in Sugarcube 2.1.2 so if I can use it as a UI bar, it may be prudent for me to do so in Sugarcube 2.1.2.

Is there a difference in how Sugarcube 2.1.2 handles stylesheets or is it just a problem with mine? I can include my style sheet if necessary. Thank you :)

Comments

  • The internal structure and stylesheets of SugarCube v2 (currently 2.3.3) are somewhat different than SugarCube v1 (currently 1.0.34). What v1 styles are you attempting to use in v2?
  • In hindsight it would probably been better to ask what exactly the differences are between stylesheets between version 1.0.26, and the current version of sugarcube 2.50, but I wasn't aware that these two were so vastly different upon initial inception..

    Obviously the side-bar and other details are different, but even things like the size and even the slight colour of the text between versions are different which strikes me as odd. I've had a look at the only 2.0 + stylesheet there is and it seems fairly identical.

    My main query is; where has the
    @media screen and (max-width: 960px) {
    	.passage {
    		font-size: 1.5em;
    		width: 75%;
    	}
    }
    @media screen and (max-width: 640px) {
    	.passage {
    		font-size: 1.25em;
    		width: 95%;
    

    gone (the place where I can put my image etc) and why are details for things like .passage .content not applicable to the latest version?



    If now is not a good time for adressing these issues because further development of the stylesheet format is in progress, then I understand, just a little baffled is all.
  • This is going to get ramble-y.

    Not to put too fine a point on it, but you should not be wholesale copying the contents of the core CSS files. I cannot fathom what made you think that was a good idea. I don't mean to sound like a jerk, however, copying entire style rules verbatim simply to change the value of one or two properties is not a good idea—at all. Case in point. Why do you even have the init-screen styles in there at all—especially when you've made zero changes to them. Frankly, it's been hard to separate what in there is your actual styling and what isn't.

    In summary. I'm unsure what you were actually attempting to do with your v1 styles, so attempting to translate them into v2 styles is… difficult, at best. Clarification would be helpful. Essentially, I can't help you as much as I'd like to if I'm confused about what you want.

    Moving on to answering questions.

    The style differences between v1 and v2 are numerous, yes. They're also for good reason. The styling for v1 is, honestly, kind of a mess. I've tried to correct most of its issues in v2, so that's the main reason they're so different—the other main reason is simply that the UI is different, even though they look similar.

    As to where the media queries went. They're one of the issues with v1 and are largely gone as a result. That said, there are a few in v2, since it tries to be responsive. A check of v2's CSS files, which are linked in its CSS doc, would have turned up the three which exist (at the top of core.css and ui-bar.css).

    As to the v1 .passage .content selector. The equivalent v2 selector is simply .passage. Several unnecessary container elements were removed in v2—the .body.content element was one of those. If you haven't already, maybe you should look at v2's HTML doc, which shows the core elements and their layout.

    As to the "2.0 + stylesheet". Assuming you mean Bleached, I don't know how you consider them fairly identical ("them" being the v1 and v2 versions of Bleached, which is what I assume we're talking about). Save for containing some of the same selectors for basic elements, they're not very similar at all—seriously.

    The styles for v2 haven't really changed much since v2.0.0. This is not to say that there haven't been changes since the initial release. The changes, however, have largely been additions for new features, rather than modifications to existing styles (e.g. additions: the test mode styles, optional transition styles for <<timed>> and <<repeat>>, etc).


    PS: If you haven't already, you should probably look at the v2 upgrade instructions—since you're coming from v1, start with the release 2.0.0 set. There's not really much there about the CSS changes, but it's stuff you should know regardless.
  • This is going to get ramble-y.

    Not to put too fine a point on it, but you should not be wholesale copying the contents of the core CSS files. I cannot fathom what made you think that was a good idea. I don't mean to sound like a jerk, however, copying entire style rules verbatim simply to change the value of one or two properties is not a good idea—at all.

    To me, the stylesheet wasn't the most important issue out of the whole project because for me, when it's finished and I'm happy with it, it's done. I have some further ideas on the subject, but that just incorporates having two media screens instead of one and moving the passage contents box for certain passages (if possible).

    Other than that, I tried to get the process done as quickly and efficiently as possible so I could quickly focus on other things, rather than be spending too much time on something I felt like wasn't integral to plot, music, or anything else for that matter.
    Case in point. Why do you even have the init-screen styles in there at all—especially when you've made zero changes to them. Frankly, it's been hard to separate what in there is your actual styling and what isn't.

    I had seen a while ago on the forum a thread about a customised loading screen which included that data. In my excited, euphoric state I attempted to get it working in my own story, and because I had no real idea what I was doing on that front, progress kinda stopped right there.

    Seeing as it wasn't a huge issue for me, I fiddled round with the settings of the various stylesheets that are publicly available until I had developed the originals to look and function in a fashion that was unique to my own work.

    In all honesty, most things stylesheet related have been at the bottom of my to do list since I got it to look how I wanted, after that I didn't really care that much so long as it worked and looked fine..
    In summary. I'm unsure what you were actually attempting to do with your v1 styles, so attempting to translate them into v2 styles is… difficult, at best. Clarification would be helpful. Essentially, I can't help you as much as I'd like to if I'm confused about what you want.

    <i>What I managed to get working in v1x</i>

    Image background, green, computerised text, media screen, image sidebar, images in media screen thanks to tags

    <i>What I didn't manage to get working v1x </i>

    Custom loading screen, text transition from left to right as if on computer BIOS/MS DOS

    <i> What I managed to get working in 2x </i>

    Image background, green, computerised text, image sidebar

    <i> What I didn't manage to get working in 2x </i>

    Media screen, Images in media screen thanks to tags, text a lot larger and in place of the original media screen, sidebar different size (?)
    The style differences between v1 and v2 are numerous, yes. They're also for good reason. The styling for v1 is, honestly, kind of a mess. I've tried to correct most of its issues in v2, so that's the main reason they're so different—the other main reason is simply that the UI is different, even though they look similar.

    As to where the media queries went. They're one of the issues with v1 and are largely gone as a result. That said, there are a few in v2, since it tries to be responsive. A check of v2's CSS files, which are linked in its CSS doc, would have turned up the three which exist (at the top of core.css and ui-bar.css).

    As to the v1 .passage .content selector. The equivalent v2 selector is simply .passage. Several unnecessary container elements were removed in v2—the .body.content element was one of those. If you haven't already, maybe you should look at v2's HTML doc, which shows the core elements and their layout.

    As to the "2.0 + stylesheet". Assuming you mean Bleached, I don't know how you consider them fairly identical ("them" being the v1 and v2 versions of Bleached, which is what I assume we're talking about). Save for containing some of the same selectors for basic elements, they're not very similar at all—seriously.

    The styles for v2 haven't really changed much since v2.0.0. This is not to say that there haven't been changes since the initial release. The changes, however, have largely been additions for new features, rather than modifications to existing styles (e.g. additions: the test mode styles, optional transition styles for <<timed>> and <<repeat>>, etc).


    PS: If you haven't already, you should probably look at the v2 upgrade instructions—since you're coming from v1, start with the release 2.0.0 set. There's not really much there about the CSS changes, but it's stuff you should know regardless.

    I don't have a very keen eye for code, especially seeing as most of the time when I do get to work on it I am already tired as it's often mostly done at night x)

    Ahh. I see already from these links given that even the symbols used in the stylesheet are different! Still, refreshing to see that the media screen may not be executed by v2 + just yet x)

    I had already checked the last link given before making this post, it's why I did make it actually x) there wasn't much information there regarding this particular issue I'm afraid.

    Much obliged, I have high hopes that those links will be very useful! I've made a story dedicated to only working on the stylesheet right now as well so I don't mess about with what I already have too much!

    When I get a chance to give it all a go, I will let you know whether those links did the job :) thanks again!
  • Before you go to too much effort. Have you even really tried SugarCube v2 on small format devices with its default styles intact?

    Again, it's not very like v1, especially in how it handles responsiveness on small format devices. I'd suggest seeing how it responds, before using any knowledge you think you had about how v1 behaved in this area. Throwing in @media rules without a good grasp of what you're changing and why is a swift way to break responsiveness.

  • Have you even really tried SugarCube v2 on small format devices with its default styles intact?

    Again, it's not very like v1, especially in how it handles responsiveness on small format devices.

    At the risk of making a fool of myself, I'd have to ask what exactly constitutes as a small format device? Like a phone or a laptop? Sorry if I sound dumb, again; it's my first time for the better part of all this.
    I'd suggest seeing how it responds, before using any knowledge you think you had about how v1 behaved in this area. Throwing in @media rules without a good grasp of what you're changing and why is a swift way to break responsiveness.

    That's a good point. I'm still mostly directing my attention towards finishing the introductary segment, alongside character creation - so I haven't been too focused upon the stylesheet between sugarcube 1 and 2.

    I see that the basic format is still there, but text jumps up to the top of the screen instead of where I had placed it.

    In all honesty I was interested in the v2+ stylesheet design because of the retractable sidebar design, and the generally more sleek visuals (and debug mode is pretty useful too!).

    I'll have a go when I get round to it, but should I be more concerned about this small format device business?

  • RaddersHQ wrote: »
    At the risk of making a fool of myself, I'd have to ask what exactly constitutes as a small format device? Like a phone or a laptop?
    Yes. I should have been clearer there and said something like small viewport device or mobile device. Essentially, anything where you're dealing with a viewport (the "page" area inside of the browser) which has limited dimensions. So, basically, tablets and smartphones—though, making the viewport smaller on a desktop or laptop, by simply making the browser window small, also counts (n.b. Firefox has a developer tool named Responsive Design Mode which does something similar).

    In particular to SugarCube v2, it starts its active responsiveness handling at widths of ≤1136px.

    Additionally, v2 doesn't only use media queries to handle responsiveness. For example, the way that the passage container is centered is a passive part of it. There are also a few things which are handled only at startup by JavaScript (e.g. having the UI bar start in the stowed state).

    RaddersHQ wrote: »
    I'll have a go when I get round to it, but should I be more concerned about this small format device business?
    Ideally, you should ensure that any additions and/or layout changes to the UI perform at least as well as v2's default UI styling does under small viewport conditions. Other than that, I wouldn't worry about it.

    My recommendation here would be, specifically, to not make any changes to the layout of core elements until you know that you actually need to do so. And note that I specified layout changes, visual-only styling changes should never be an issue (e.g. colors, background images, etc). It's only when you start changing the positioning, size, etc of the core elements, or add new ones, that you even need to worry about this at all.

    Regardless, it's certainly something which may be put off until later.
  • Well to cut a long story short I seem to remember seeing how the design appeared on a laptop (in the early stages; albeit the general design was still in place!) and from what I recall there were no particular issues arisen from that.

    I wasn't even aware at this juncture that the software could operate on a mobile phone no questions asked! I know they have problems trying to open/play flash games so that is where my concerns first arose.. Would any special software have to be put in place for it to be phone accessible or would everything be fine for most contemporary modern smartphones?

    On such devices, would everything get scaled down to a smaller size to accomodate for the smaller screen (like it would on, say, computer displays of differing sizes?) or would the layout, text, images and font have to be accounted for for optimal performance on different platforms?

  • RaddersHQ wrote: »
    I wasn't even aware at this juncture that the software could operate on a mobile phone no questions asked! I know they have problems trying to open/play flash games so that is where my concerns first arose.. Would any special software have to be put in place for it to be phone accessible or would everything be fine for most contemporary modern smartphones?
    All story formats are web (HTML+JavaScript) applications. In general, they'll be available on any platform which can run a browser—which does include smartphones.

    As to needing "special software". You should not need anything extra for basic functionality/interactivity. That said, not all browsers or platforms are equal, so more advanced usage might require extra care and/or software—though, that's a general issue and not specific to smartphones.

    RaddersHQ wrote: »
    On such devices, would everything get scaled down to a smaller size to accomodate for the smaller screen (like it would on, say, computer displays of differing sizes?) or would the layout, text, images and font have to be accounted for for optimal performance on different platforms?
    In general, I believe that most story formats should scale appropriately. That said, however, there may be specific instances that need adjustment depending on what you're doing and the story format in question.

    Also note, however, that I'm only referring to the story formats themselves. Your code also needs to be written with that goal in mind. For example, special care should be taken in your CSS when specifying absolute dimensions/sizes and/or defining fixed/absolute positioning—what might work fine in your desktop might be too large/small and/or well off-screen on a smartphone. Generally, you should prefer relative units and positioning—though, again, that's a case-by-case kind of thing.
  • Ahh, much obliged - that's definitely something to keep well in mind for the future, especially in terms of smaller devices.

    As you say, I think that's really a case-by-case sort of operation and won't require too formal a level of attention until I'm applying finishing touches and the like.

    When the time comes I will test it's functionality on these devices. Hopefully it won't be a huge issue but I guess we'll find out!
Sign In or Register to comment.