Jump to content

MoonSkin 3.3 Pro Dark Skins [UPDATE]


teez

Recommended Posts

%7Boption%7D



File Name: MoonSkin 3.3 Pro Dark Skins [UPDATE]

File Submitter: teez

File Submitted: 07 Oct 2012

File Category: Themed Skins



Kompatybilne z :

  • Custom Sidebar Blocks
  • IP.Blog
  • IP.Downloads
  • IP.Shoutbox
  • IP.Nexus
  • IP.Gallery
  • Inne..

%7Boption%7D


Mój drugi autorski skin, tworzony od zera. Z racji braku inspiracji zacząłem eksperymentować z przeźroczystością tabel. Bardzo mi to przypadło do gustu, po czym zrobiłem tak większość forum.Zmieniłem również całą czcionkę. Przy okazji poznałem właściwości box-shadow, które również użyłem w szablonie. Styl jest na tyle uniwersalny, z racji takiej, że po zmianie tła na inny tematycznie, jest w stanie przystosować się do niej, chociaż może potrzebować małej edycji.



%7Boption%7D

Nie chciałem zostawić zwykłego loga. Zastosowane w w/w skinie po najechaniu na niego kursorem płynnie się obraca, a następnie wraca do swojego pierwotnego stanu. Dodatkowo dodałem do tego przeźroczystość, która również z czasem zmienia się. Wygląda to bardzo efektywnie.

%7Boption%7D

Menu w którym zastosowane są zmiany tła w krótkim okresie czasu, podczas przejścia na daną zakładkę. Dodatkowo zastosowane cień tekstu oraz przeźroczystość. W pasku umieściłem skrót do wyszukiwarki.


%7Boption%7D

W profilu użyłem przeźroczystego maintitle z poświatą w okół, boczne menu ( Friends, Topics, Posts [..] ) zmieniłem jedynie kolorem oraz usunąłem animację. Zedytowałem również okienko z aktualizacją statusu, aby bardziej upodabniało się do reszty skina.

%7Boption%7D

Przeźroczyste tło wraz z podświetlonym maintitle. Dodatkowo poświata w okół avataru. %7Boption%7D

%7Boption%7D


Zmieniłem całkowicie widok panelu użytkownika. Skasowałem tło oraz dodałem cień.

%7Boption%7D

Dobitna zmiana cytatów. Dodatkowo po najechaniu kursorem płynnie rozświetla się.

%7Boption%7D

Mój ulubiony fragment. Po dłuższej pracy otrzymałem taki efekt. Dodane podświetlenie w okół przeźroczystego maintitle oraz avatarów, zmienione buttony. Przeźroczyste tło postów oraz informacji o autorze.

%7Boption%7D



here to download this file

Link to comment
Share on other sites

Ok.

ACP -> Look & Feel -> MoonSkin -> CSS -> ipbstyless.css and

Find :

    background: url({style_images_url}/bg.jpg ) no-repeat scroll -640px 0 transparent;

Change to :

    background: url({style_images_url}/bg.jpg ) repeat-x scroll 0 0 transparent;
Link to comment
Share on other sites

Also, I noticed that instead of having the image be static while the forums scroll down, the image disappears off the screen as you scroll down:

">

Find in ipbstyless.css

        background-color: #061411;

and change to your color.

Link to comment
Share on other sites

Thanks for this tip, it made it fit my screen perfectly:

Change to :

    background: url(		 ) repeat-x scroll 0 0 transparent;

However, I don't think I explained the second problem well. This skin would be perfect if the background imaged stayed there while the forums scrolled down. Instead, the forums scroll down with the picture. Does that make sense?

Here are example screenshots:

">

">

">

See how the background doesn't move but the forums do? There must be a simple way to do that.

Link to comment
Share on other sites

Hey Teez, SecTalk.com was able to fix that problem for me. I just had to change 'scroll' to 'fixed' in ipb_styles.css.

I have your skin as the default now and love it One thing I was wondering about though is if there would be a way to make the forums a little higher and maybe remove the logo option. That way more of the forum would be visible without scrolling down.

Link to comment
Share on other sites

ACP -> Look & Feel -> Your name skin -> CSS -> ipbstyles.css

Find :

    #logo { display: inline; opacity: 1;     

    -webkit-transition: all 4s ease-in;

    -moz-transition: all 4s ease-in 0s;

     -o-transition: all 4s ease-in;        

    -ms-transition: all 4s ease-in;

    position: absolute;}


#logo:hover {

    -webkit-transform: rotate(-1080deg);

    -moz-transform: rotate(-1080deg);    

    position: absolute;

    opacity: 0.5;

    -webkit-transition: all 4s ease-in;

    -moz-transition: all 4s ease-in 0s;

     -o-transition: all 4s ease-in;        

    -ms-transition: all 4s ease-in;

}

Change to :

#logo { display: inline; }

Link to comment
Share on other sites

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...