Shop Mobile More Submit  Join Login
The Royale by GillianIvy The Royale by GillianIvy
Finally, I'm releasing the accompaniment for my Designing a Journal Skin Tutorial.

Live view: [link]


Features.
:bulletblack: Ordered and unordered list formatting
:bulletblack: Blockquote styling
:bulletblack: Subheaders via <strong> tags
:bulletblack: P formatting to indent paragraphs.
:bulletblack: Font style change via <Small> tags, which has a chiseled effect.
:bulletblack: Feature gallery which is in the footer.
:bulletblack: Div class="center" to center thumbs or text on the fly.
:bulletblack: <em> Tag around emotes/stamp thumbs to remove any thumbstyling.
____________________________________
Minor Issue Workaround

Better Solution

Copy & paste the following:

.gr-top h2 .journal-edit-mode{z-index:20;}


There is an issue with the journal title box being unedittable. If you use `electricjonny's "Better Skin Options", then this is a non issue. You'll be able to turn off the live preview on the fly.


Otherwise, simply switch off the skin, edit your title, then put the skin back on. Very simple change. You will want to make sure anything in your footer is saved first. The problem arose because of the layering of images to achieve the desired effect. z-index did not fix, believe me, I tried...

Solution offered by ^namenotrequired - you can just paste the following code into the URL bar and the skin doesn't show up anymore :

javascript:void(JournalEditor.disable_skin())


____________________________________

You can edit the Featured Gallery in the footer section, simply replace all of the thumbs. I recommend 3 rows of 4. Unsure if it will wreck the layout otherwise. I created the gallery to fix an issue I may have later resolved, but ended up liking it so kept it.

Anyone who was following the progress of this from the tutorial, there were some changes to the layering of the images. Basically, I had to put the images all into different divs than I had them in. Waaay complicated to explain exactly what I did, because it was a lot of fidgeting. I almost had to sacrifice the bottom image, and opted to rearrange everything instead...




Google Chrome Users: The Feature Gallery did not seem to be active for some reason. Works fine in Mozilla and in IE9.

Report any issues with this journal to my forum: [link]

Art, design, Layout, CSS is my own. This is not a template, you may not alter or redistribute. This is free to use.

Featured here: [link]
Add a Comment:
 

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconalpha-nerd:
Alpha-Nerd Featured By Owner Oct 21, 2014  Student General Artist
for some reason I can't replace the thumbs
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 28, 2014  Hobbyist General Artist
Okay, I've checked and the featured gallery edits fine.  You must go to "Edit Skin" change or remove the feature code, then "Save As".  You should be able to add the feature code in the entry part of your journal so you do not have to edit it each time.  This is an old skin of mine, where I would include codes as a blueprint in the headers and footers.  I try not to do that any more as it may be harder to remove them when not wanted.  This skin is long overdue for an update.  :B
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 21, 2014  Hobbyist General Artist
This skin may be out of date.  And I've had errors in it for Chrome, which I use now.  It should be editable in the footer, if I remember the structure correctly.  You ought t o be able to remove that completely.  I'll have to check it when I have a bit more time.  If you haven't heard back by Sunday, feel free to remind me.
Reply
:iconalpha-nerd:
Alpha-Nerd Featured By Owner Nov 1, 2014  Student General Artist
oh my heavens thank you so much youre a lifesaver
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 2, 2014  Hobbyist General Artist
Sure.  I'll have to update my older skins some time.  I just haven't had the opportunity/motivation.  :B
Reply
:iconetsuko-hime:
Etsuko-Hime Featured By Owner Jan 21, 2014  Hobbyist Traditional Artist
this is wiry beautiful! :) i have installed it and i will use it on the AWW ( Angels Whitout Wings ) project! :) I'm so lucky i can say I'm a part of it now :)
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 21, 2014  Hobbyist General Artist
Thank you.  It is an older skin now, so not everything maybe be functioning correctly.  Let me know if there is trouble.  I am glad you will be using it for your project.
Reply
:iconetsuko-hime:
Etsuko-Hime Featured By Owner Jan 22, 2014  Hobbyist Traditional Artist
Np :) it seem to work fine XD its not really my projeckt, im just helping wit it ;p
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 22, 2014  Hobbyist General Artist
Great!  ;D
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 21, 2013   General Artist
:la:
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 21, 2013  Hobbyist General Artist
;D  Thanks, though this one is likely out of date now.
Reply
:iconroyalfront:
RoyalFront Featured By Owner May 20, 2012
I tried using this but I cannot change my title....
Reply
:icongillianivy:
GillianIvy Featured By Owner May 20, 2012  Hobbyist General Artist
Sorry, here is the solution, copy & paste the following into the CSS (Edit Skin>>CSS):


.gr-top h2 .journal-edit-mode{z-index:20;}


I forgot (or didn't know) that snippet back then. Alternate solution would be to enter the title before skinning the journal.
Reply
:iconroyalfront:
RoyalFront Featured By Owner May 20, 2012
alright thank you :)
it is a lovely skin btw :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 20, 2012  Hobbyist General Artist
Thanks ;D A lot of my older stuff needs updating. Since I've learned better solutions to things than I knew then... So much work to revisit though. DA does not make a way to update old CSS, have to reupload as a new deviation. :O
Reply
:iconroyalfront:
RoyalFront Featured By Owner May 20, 2012
yea DA makes it hard to do a whole lot really lol. There have been times I have wanted to clean out everything but they do not have a delete all which would be nice if you want it haha
I could only wish I could do the CSS stuff :)
Reply
:icongillianivy:
GillianIvy Featured By Owner May 20, 2012  Hobbyist General Artist
:nod:
Reply
:iconanthrochaos:
AnthroChaos Featured By Owner Oct 30, 2011  Student Digital Artist
I'm having issues with adding a title :/
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 31, 2011  Hobbyist General Artist
Yes, there was an issue, quick and easy solution, remove the skin and put it back on. The other solution requires a bit of code for me to look up because I didn't know the solution back when I made it. There's a code that effects the journal edit only. It's a problem with layers. The title is on the bottom :( Sorry about that! If you want me to figure out the proper code, you would need to add it to the bottom then save it and it would always have it then.
Reply
:iconanthrochaos:
AnthroChaos Featured By Owner Oct 31, 2011  Student Digital Artist
haha no its ok :] i just did wat u said,... i just typed it into regular format and then put the skin back on ^_^ it's still duable! :D
Reply
:iconanthrochaos:
AnthroChaos Featured By Owner Oct 30, 2011  Student Digital Artist
oops nvm
Reply
:iconkarlinaximi:
KarlinaXimi Featured By Owner Sep 29, 2011  Hobbyist Interface Designer
I love it!
Reply
:icongillianivy:
GillianIvy Featured By Owner Sep 29, 2011  Hobbyist General Artist
Thank you! :heart:
Reply
:iconpaperpixy:
paperpixy Featured By Owner Jul 18, 2011  Student General Artist
Aaaah... I noticed that there is a font issue with the latest DA update, that pretty journal font is no longer active!
Reply
:icongillianivy:
GillianIvy Featured By Owner Jul 18, 2011  Hobbyist General Artist
! Oh noes! They better go fix it! Thanks for telling me. Hmmm, looks like it's active for me. Have you seen it before? All the Google Webfonts were supposed to be active. But I'm coming to find out, not for everybody? It's supposed to be integrated into DA. I have to remember to pick alternate fonts so it doesn't look too bad or weird when the proper fonts don't load.
Reply
:iconendorell-taelos:
Endorell-Taelos Featured By Owner Jun 13, 2011   General Artist
That's beautiful. :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 13, 2011  Hobbyist General Artist
:hug: Thank yous! ;D
Reply
:icontituskun:
TitusKun Featured By Owner Jun 4, 2011  Student Artist
i love this! its amazing!
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 4, 2011  Hobbyist General Artist
Thank you, glad you love it so much ;D
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner May 31, 2011  Student Interface Designer
Otherwise, simply switch off the skin, edit your title, then put the skin back on.
That's not even needed, actually, you can just paste the following code into the URL bar and the skin doesn't show up anymore :)
javascript:void(JournalEditor.disable_skin())
Reply
:icongillianivy:
GillianIvy Featured By Owner May 31, 2011  Hobbyist General Artist
Thanks, adding that to the description. It got fubared due to layering and I could not get it to properly place the title above without it making the text go below it (and it untypeable, I know, it's not a word...).
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner May 31, 2011  Student Interface Designer
Ah... you can always use the selector .journal-edit-mode in the original CSS to make things apply to editing mode and not to the finished version :)
Reply
:icongillianivy:
GillianIvy Featured By Owner May 31, 2011  Hobbyist General Artist
Oooooh neat, thanks for letting me pick your brain, it's useful. Though it still wouldn't have worked right, the turn off script is good though. But that sounds like a good way to make a practical joke journal (getting ideas for next April Fool's).
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner May 31, 2011  Student Interface Designer
Anytime :D I'm no CSS expert, I just helped alpha test the journal system so I know the more common problems and solutions :) You can find them in a journal from $kemayo too if you're interested.

Why for a practical joke? :lol:
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 1, 2011  Hobbyist General Artist
Inspired by =oblivion00's CSS practical joke last year. Just thought it'd be funny to have a journal that looks fine as a post, but when you go to use it, it has some scary image jump at you or something. Maybe for Halloween...

Added :devkamayo: to my watch, I saw he did the Google fonts.
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner Jun 1, 2011  Student Interface Designer
Ah, right! :lol: Sounds fun indeed :lmao:
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 1, 2011  Hobbyist General Artist
Now don't tell anyone my evil plan :evillaugh:
Reply
(1 Reply)
:iconbradleysays:
bradleysays Featured By Owner May 31, 2011
This deviation has been featured here! :dalove:
Please consider faving the article. :hug:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 31, 2011  Hobbyist General Artist
Thank you, I did!
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner May 28, 2011  Professional Interface Designer
I LOVE the elegance in this, and how it works seamlessly with the deviantart colour scheme! =D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 28, 2011  Hobbyist General Artist
Thank you. I had drawn the swirly header a long time ago with the intent of creating a journal. Good thing it sat on my to do pile (not really a list) as I really had no clear idea of what I wanted to do with it. I had already scanned it and edited it for creating a header. And I was trying to think what to make a tutorial skin of. Of course, it was more complicated than I anticipated... image layering...

I seem to have a fondness for transparencies. I chose a simple palette to keep it coordinated so I'd keep in DA colors. I like journals to not be completely out of place :XD:
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner May 28, 2011  Professional Interface Designer
No I agree =p I dislike journals which have hard edges and look like they've just been smacked onto deviantart without any thought x) I'm stunned that you designed the header yourself! It's gorgeous :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 28, 2011  Hobbyist General Artist
I work best on pen and paper. I have the damnedest time using the Wacom. It's an older cheaper model, so not the best. And I cannot for the life of me just draw a line that doesn't look all thick then thin then transparent or...

I actually only very rarely use stock or other people's work. I'm very permissions wary and such, also, I like to make things myself. Since I do just about every medium and style I've ever come across.

Guess why I like CSS so much. I see a layout like an artwork, put all your divs aesthetically onto the page and add in some stylingness... And voila, art!
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner May 28, 2011  Professional Interface Designer
I must admit, I too prefer to sketch things on pen and paper before attacking my graphics tablet. Even then I generally use the pen tool... I guess because I don't use my graphics tablet very much, I'm not used to it.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 28, 2011  Hobbyist General Artist
I'm all out of sorts with the pentab. I really have the hardest time getting the pressure right. I used to color with a mouse, and really wasn't so bad at it. Now I generally avoid coloring at all, for loathe of the mouse. I use the selection tool for everything. Layers, fills, filters and layer masks... :faint: I really need to learn it, since I love amazing digital paintings which I'm sure I could do if I weren't such a klutz about it. My bf says we just need a better pentab. I agree!
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner May 29, 2011  Professional Interface Designer
Wahaha! If it's an excuse to spend more money, then buy yourself a new pentab =p Spending money ftw! I'm the same though, whilst I barely colour anything anymore, I used to do it a lot when I was younger - and back then I only had a mouse. I tried it again not long ago, and again used the
mouse and all was well; but then I tried the pentab... weh @ pressure! I suppose I really just use my pentab for scribbling around in Photoshop with, and then I use the pen tool & mouse etc to create it. My prowess with Photoshop comes from my technical knowledge XD Not from my artistic merit!
Reply
:icongillianivy:
GillianIvy Featured By Owner May 29, 2011  Hobbyist General Artist
I've had `adonihs's brush set installed for a while but never had loaded them in PS and used them for anything. I did today, and what a difference it makes. I have 0 brush making skills. (I don't even know which brushes are for which paints in the real world)
Reply
(1 Reply)
:iconneurotype:
neurotype Featured By Owner May 26, 2011  Hobbyist General Artist
The colors are so good! :drool: ...I confess, I'd probably change the fonts (minimalist much?), but I'm totally digging the rest.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 26, 2011  Hobbyist General Artist
I know you love the prettiness of straight fonts, whereas I prefer the handwritten look. I want my journals to look like I wrote them ;D And no way would I ever manage to write perfectly neat lettering!

Thank you! My favorite part of the colors is actually the white gradient header. I tried to do the journal without it and I could not bare to part with it. Same with the bottom green gradient. It was a crapola of trouble trying to get them to work right...
Reply
:iconneurotype:
neurotype Featured By Owner May 27, 2011  Hobbyist General Artist
Haha, I do want to turn my handwriting into a font...but whattapain.

That part is awesome! :highfive:
Reply
Add a Comment:
 
×




Details

Submitted on
May 24, 2011
File Size
5.8 KB
Link
Thumb
Embed

Stats

Views
5,803 (1 today)
Favourites
176 (who?)
Comments
91
Installs
1,033

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×