Aly

Voltra Premade Profile 01

Aly
Feb 8th, 2018
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.20 KB | None | 0 0
  1. /* - - - - -
  2.  
  3. PREMADE CODE BY ALY
  4.  
  5. - - - - - */
  6.  
  7.  
  8. /* - - IMAGES - - */
  9.  
  10. /* - - change banner inside of main box */
  11. #voltie>div:nth-child(1)>section>div:before {
  12. background-image: url(http://i.imgur.com/iY6SAd2.png);
  13. }
  14.  
  15. /* - - change image on top right of box */
  16. #content:before {
  17. background-image: url(https://orig05.deviantart.net/3e33/f/2017/129/9/a/f2u_rainbow_quartz_pagedoll_by_engare-db8pur1.png);
  18. }
  19.  
  20. /* - - background image of profile */
  21. #content:after {
  22. background-image: url(http://i.imgur.com/3vaHD5D.png);
  23. }
  24. /* - END images - */
  25.  
  26.  
  27. /* - - COLORS - - */
  28.  
  29. /*
  30. #fff - base color white - or black as #000
  31. #f9f2e9 - main color 1 - light
  32. #d0b4b9 - main color 2 - medium
  33. #987280 - main color 3 - dark
  34. */
  35.  
  36. #content, #voltie .voltie_comments ul li p,
  37. #voltie>div:nth-child(1)>section>div>div:nth-child(1)>a,
  38. #voltie>div:nth-child(1)>section>div>div:nth-child(2)>a {
  39. background-color: #fff !important; }
  40. h2, h3, .content_header h1 {
  41. color: #fff !important; }
  42.  
  43. body, ul.content_navigation a, #content section {
  44. background-color: #f9f2e9 !important; }
  45. .content_header h1 {
  46. text-shadow: 3px 6px 15px #d0b4b9, 2px 2px #f9f2e9; }
  47.  
  48. ::selection, h2, h3 {
  49. background: #d0b4b9 !important; }
  50. #comment-button {
  51. color: #d0b4b9; }
  52.  
  53. #comment-button { background-color: #987280; }
  54. ::selection, body, #voltie .voltie_comments ul li p,
  55. #voltie>div:nth-child(1)>section>div>div:nth-child(1)>a,
  56. #voltie>div:nth-child(1)>section>div>div:nth-child(2)>a {
  57. color: #987280 !important; }
  58.  
  59. /* - END colors - */
  60.  
  61.  
  62. /* - - FONT INSTALLMENT - - */
  63. @font-face {
  64. font-family: Homemade Apple;
  65. font-style: normal;
  66. font-weight: 400;
  67. src: url(https://fonts.gstatic.com/s/homemadeapple/v7/yg3UMEsefgZ8IHz_ryz86IpVThvdH1ZERIrfWb3R7t4.woff2);
  68. }
  69. @font-face {
  70. font-family: Montserrat;
  71. font-style: normal;
  72. font-weight: 300;
  73. src: url(https://fonts.gstatic.com/s/montserrat/v10/IVeH6A3MiFyaSEiudUMXE8u2Q0OS-KeTAWjgkS85mDg.woff2);
  74. }
  75. /* - END font installment - */
  76.  
  77.  
  78. /*
  79. - -- --- -- - -- --- -- - -- --- -- -
  80. - - - - - SETUP - PLEASE DO NOT EDIT BELOW THIS SECTION - - - - -
  81. - -- --- -- - -- --- -- - -- --- -- -
  82. */
  83.  
  84. * {
  85. border-radius: 0px !important;
  86. border: 0 !important;
  87. box-shadow: none !important;
  88. }
  89.  
  90. body {
  91. overflow-x: hidden;
  92. }
  93.  
  94. a, a:link { color: inherit; }
  95.  
  96.  
  97. /*
  98. - -- --- -- - -- --- -- - -- --- -- -
  99. - - - - - ELEMENT MODIFICATION
  100. - -- --- -- - -- --- -- - -- --- -- -
  101. */
  102.  
  103. /* - - Hide Elements - - */
  104. #header_navigation,
  105. #footer, .copyright,
  106. #content>div:nth-child(7),
  107. #structure>header.guest.night,
  108. #voltie .voltie_comments ul li p:before,
  109. #structure>header.min #header_navigation,
  110. #voltie>div:nth-child(1)>section>h2>span.voltie_username,
  111. #voltie>div:nth-child(1)>section>h2>span.voltie_pronouns,
  112. #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container>button>span {
  113. display: none !important;
  114. }
  115. /* - END hide elements - */
  116.  
  117.  
  118. /* - - Remove Styling - - */
  119. #content *,
  120. h1, h2, h3, h4,
  121. .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  122. .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  123. padding: 0;
  124. margin: 0px;
  125. }
  126. #content, #content section, .content_header,
  127. #voltie .voltie_comments ul li p, ul.content_navigation a {
  128. border: 0;
  129. }
  130. #voltie {
  131. margin: 0;
  132. padding: 0;
  133. width: 100%;
  134. margin: 0 !important;
  135. }
  136. /* - END remove styling - */
  137.  
  138. /* - - Voltie Video - - */
  139. #voltie > div:nth-child(1) > section.voltie_video > p {
  140. padding: 10px; padding-top: 20px; text-align: left; }
  141.  
  142. #comment-button, #comment-form > div:nth-child(2) > div:nth-child(1) > span:nth-child(1) {
  143. float: left; vertical-align: top;
  144. padding-left: 20px; padding-right: 20px;
  145. height: 25px;
  146. line-height: 25px;
  147. width: 100%;
  148. text-align: center;
  149. text-shadow: none;
  150. text-transform: uppercase;
  151. letter-spacing: 1px;
  152. }
  153.  
  154. #comment-form > div:nth-child(2) > div:nth-child(1) > span:nth-child(1) { margin-top: 4px; }
  155.  
  156. /* - - Voltie Bio - - */
  157. #voltie>div.col-md-6>section.voltie_bio {
  158. padding: 20px;
  159. min-height: 397px;
  160. }
  161. #voltie>div.col-md-6>section.voltie_bio h3 {
  162. margin: -10px;
  163. margin-bottom: 20px;
  164. }
  165. #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container {
  166. left: 0;
  167. bottom: 0;
  168. margin: 0;
  169. padding: 5px;
  170. width: 200px;
  171. position: fixed;
  172. font-weight: 300;
  173. font-size: .75em;
  174. margin: 10px !important;
  175. font-family: Montserrat;
  176. transition: all .25s ease-in-out;
  177. }
  178. #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container>div {
  179. padding: 10px;
  180. margin-top: 10px;
  181. text-align: justify;
  182. }
  183. #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container>button {
  184. width: 75px;
  185. padding: 5px;
  186. height: 20px;
  187. line-height: 10px;
  188. letter-spacing: 2px;
  189. }
  190. /* - END voltie bio - */
  191.  
  192.  
  193. /* - - Main Box - - */
  194. #content {
  195. padding: 0px;
  196. position: absolute;
  197. left: 0;
  198. top: 125px;
  199. right: 0;
  200. margin: 0 auto;
  201. margin-bottom: 100px;
  202. border: 0px;
  203. box-shadow: none;
  204. width: 900px;
  205. height: auto;
  206. font-family: Montserrat;
  207. font-weight: 300;
  208. overflow: visible;
  209. padding: 0px !important;
  210. }
  211. /* - END main box - */
  212.  
  213.  
  214. /* - - Sprite - - */
  215. #content:before {
  216. position: absolute;
  217. left: 760px;
  218. top: -95px;
  219. right: 0;
  220. margin: 0 auto;
  221. width: 250px;
  222. height: 250px;
  223. background-size: auto;
  224. background-repeat: no-repeat;
  225. z-index: 5;
  226. background-position: center;
  227. }
  228. /* - END sprite - - */
  229.  
  230.  
  231. /* - - Banner Image - - */
  232. #content:after {
  233. content: close-quote;
  234. position: fixed;
  235. left: 0;
  236. top: 250px;
  237. width: 100%;
  238. height: 200px;
  239. background-size: auto 100%;
  240. z-index: -5;
  241. }
  242. /* - END banner image - */
  243.  
  244.  
  245. /* - - User Title, Ads and Actions - - */
  246. .content_header {
  247. border: 0;
  248. padding: 0;
  249. margin: 0;
  250. overflow: visible;
  251. }
  252. .content_header h1 {
  253. height: 50px;
  254. line-height: 50px;
  255. letter-spacing: 1px;
  256. text-transform: lowercase;
  257. font-style: italic;
  258. position: absolute;
  259. left: 0;
  260. top: -100px;
  261. width: 100%;
  262. text-align: center;
  263. font-size: 2em;
  264. font-family: Homemade Apple;
  265. font-size: 4em;
  266. top: -50px;
  267. left: 0px;
  268. }
  269. /* - END ut a a a - */
  270.  
  271.  
  272. /* - - AF SM TR - - */
  273. ul.content_navigation {
  274. padding: 0;
  275. float: left;
  276. width: 100%;
  277. height: 20px;
  278. line-height: 0px;
  279. margin: 10px !important;
  280. margin-bottom: 0 !important;
  281. }
  282. ul.content_navigation li {
  283. top: 0;
  284. left: 0;
  285. margin: 0;
  286. bottom: 0;
  287. padding: 0;
  288. margin: auto 0;
  289. position: relative;
  290. margin-right: 5px !important;
  291. }
  292. ul.content_navigation li a {
  293. height: 20px;
  294. font-size: 9px;
  295. line-height: 20px;
  296. letter-spacing: 1px;
  297. font-family: Montserrat;
  298. text-transform: uppercase;
  299. background-color: #f9f2e9;
  300. padding-left: 7px !important;
  301. padding-right: 7px !important;
  302. }
  303. /* - END af sm tr - */
  304.  
  305.  
  306. /* - - Header - - */
  307. #header_stats {
  308. right: 0;
  309. margin: 0;
  310. padding: 0;
  311. top: 185px;
  312. z-index: 25;
  313. width: 100%;
  314. left: -350px;
  315. width: 300px;
  316. margin: 0 auto;
  317. text-align: center;
  318. position: absolute;
  319. text-align: center;
  320. }
  321. #header_stats>.col-inner {
  322. top: 0;
  323. left: 0;
  324. right: 0;
  325. float: none;
  326. height: 255px;
  327. position: relative;
  328. margin: 0 auto !important;
  329. }
  330. #header_stats>.col-inner {
  331. padding: 0;
  332. }
  333. #header_navigation>h3 {
  334. background-color: transparent !important;
  335. }
  336. /* - END header - */
  337.  
  338.  
  339. /* - - Top Navigation - - */
  340. #main_nav>ul, #main_nav>ul li {
  341. margin: 0;
  342. padding: 0;
  343. }
  344. #main_nav>ul { float: left; }
  345. #main_nav>ul li { margin-left: 20px; }
  346. #main_nav>ul li a {
  347. font-family: Montserrat;
  348. font-weight: 300;
  349. color: #c8b0bf;
  350. background: none;
  351. margin: 0;
  352. padding: 0;
  353. }
  354. #main_nav>ul li a .fa {
  355. display: none;
  356. }
  357. /* - END top navigation - */
  358.  
  359.  
  360. /* - - Main Box - - */
  361. #structure {
  362. position: absolute;
  363. left: 0;
  364. top: 0;
  365. width: 100%;
  366. height: 100%;
  367. overflow: visible;
  368. }
  369.  
  370. #structure>.navbar-inverse {
  371. position: absolute;
  372. left: 0;
  373. top: -25px;
  374. width: 100%;
  375. background: none;
  376. background-color: transparent;
  377. margin: 0;
  378. padding: 0;
  379. }
  380.  
  381. #structure>header { text-align: center; }
  382. #structure>header.min { background: none; }
  383. /* - END main box - */
  384.  
  385.  
  386. /* - - other
  387. things I cbf fixing aha--
  388. you shouldn't really be here anyway.. no heavy editing!
  389. - - */
  390.  
  391. #navbar>div {
  392. width: 900px;
  393. max-width: 100%;
  394. }
  395.  
  396. #user_card { margin: 10px !important; }
  397.  
  398. #voltie>div:nth-child(1)>section>div:before {
  399. top: 0;
  400. left: 0;
  401. width: 100%;
  402. height: 295px;
  403. position: absolute;
  404. content: close-quote;
  405. background-color: #ecf3ee;
  406. background-size: auto 55%;
  407. background-position: center;
  408. background-attachment: fixed;
  409. }
  410. #voltie>div:nth-child(1) { width: 100%; }
  411.  
  412. #voltie>div:nth-child(3) {
  413. width: 50%;
  414. text-align: center;
  415. }
  416.  
  417. #voltie section {
  418. padding: 10px;
  419. margin: 0;
  420. margin-bottom: 10px !important;
  421. }
  422.  
  423. #voltie>div.col-md-6>section.voltie_comments {
  424. margin-bottom: 0px !important;
  425. width: 880px;
  426. }
  427.  
  428. .row#voltie {
  429. padding: 10px !important;
  430. }
  431. #voltie>div.col-md-6, #voltie>div:nth-child(3) {
  432. width: calc(50% - 5px);
  433. }
  434. #voltie>div:nth-child(3) {
  435. margin-left: 10px;
  436. }
  437. #voltie>div.col-md-6 {
  438. margin-bottom: 0;
  439. }
  440. #voltie>div:nth-child(1)>section>img {
  441. position: absolute;
  442. right: 55px;
  443. top: 52px;
  444. transform: none;
  445. z-index: 1;
  446. }
  447.  
  448. #voltie>div:nth-child(1)>section>div {
  449. width: 100%;
  450. height: 225px;
  451. }
  452. #voltie>div:nth-child(1)>section>div>div:nth-child(1),
  453. #voltie>div:nth-child(1)>section>div>div:nth-child(2) {
  454. position: absolute;
  455. left: 0;
  456. top: 0px;
  457. width: 100%;
  458. height: 0;
  459. overflow: visible;
  460. }
  461. #voltie>div:nth-child(1)>section>div>div:nth-child(1)>a,
  462. #voltie>div:nth-child(1)>section>div>div:nth-child(2)>a {
  463. padding: 0;
  464. z-index: 5;
  465. float: left;
  466. width: 75px;
  467. height: 20px;
  468. margin: 20px;
  469. font-size: 9px;
  470. text-align: left;
  471. line-height: 20px;
  472. padding-left: 5px;
  473. position: relative;
  474. padding-right: 5px;
  475. letter-spacing: 1px;
  476. text-transform: uppercase;
  477. }
  478.  
  479. #voltie>div:nth-child(1)>section>h2 {
  480. height: 50px;
  481. background: none;
  482. overflow: visible;
  483. margin: 0;
  484. padding: 0;
  485. background: none !important;
  486. background-color: transparent !important;
  487. }
  488. #voltie>div:nth-child(1)>section>div>div:nth-child(2)>a { margin-top: 60px; }
  489. /* - END other - */
  490.  
  491.  
  492. /* - - Logo - - */
  493. #logo {
  494. margin: 0;
  495. margin-bottom: 25px;
  496. margin-top: 25px;
  497. }
  498. #logo>a {
  499. position: relative;
  500. left: 0;
  501. top: 0;
  502. right: 0;
  503. margin: 0 auto;
  504. float: none;
  505. }
  506. /* - END logo - */
  507.  
  508.  
  509. /* - - Mobile Mess - - */
  510. @media only screen and (max-width:991px) {
  511. #content:before {
  512. position: absolute;
  513. left: 0;
  514. top: -250px;
  515. right: 0;
  516. margin: 0 auto;
  517. width: 250px;
  518. height: 250px;
  519. background-size: auto;
  520. }
  521. #content {
  522. position: relative;
  523. left: 0;
  524. top: 250px;
  525. max-width: 100%;
  526. height: auto;
  527. margin: 0;
  528. margin-bottom: 50px;
  529. }
  530. #voltie {
  531. margin: 0;
  532. width: 100%;
  533. }
  534. .content_header h1 {
  535. z-index: 25;
  536. top: -100px;
  537. font-size: 2em;
  538. left: 0px;
  539. }
  540. ul.content_navigation {
  541. padding: 10px;
  542. height: auto;
  543. margin-bottom: 10px;
  544. width: calc(100% - 20px);
  545. }
  546. ul.content_navigation li {
  547. float: left;
  548. display: block;
  549. width: 100%;
  550. margin-bottom: 10px;
  551. height: 50px;
  552. line-height: 0;
  553. text-align: center;
  554. padding: 0;
  555. margin: 0;
  556. margin-bottom: 10px !important;
  557. }
  558. ul.content_navigation li a:hover {
  559. letter-spacing: 2px;
  560. }
  561. ul.content_navigation li a {
  562. float: left;
  563. vertical-align: top;
  564. height: 100%;
  565. width: 100%;
  566. line-height: 50px;
  567. }
  568. #content>div.content_header>ul>li:nth-child(3) {
  569. margin-bottom: 0 !important;
  570. }
  571.  
  572. #voltie > div:nth-child(1) > section.voltie_video > p { min-height: 0; height: auto; }
  573.  
  574. #voltie > div:nth-child(1) > section.voltie_info > div {
  575. float: left; width: 100%; height: 0; overflow: visible; }
  576.  
  577. #voltie > div:nth-child(1) > section.voltie_video > p, #voltie section, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  578. width: 100% !important;
  579. margin: 0 !important;
  580. margin-bottom: 10px !important;
  581. }
  582. #voltie section {
  583. padding: 10px !important;
  584. margin-bottom: 10px !important;
  585. }
  586. #voltie>div:nth-child(1)>section>img {
  587. float: none !important;
  588. position: relative;
  589. left: 0; top: 0;
  590. right: 0;
  591. margin: 0 auto !important;
  592. z-index: 2;
  593. }
  594. #voltie>div:nth-child(1)>section>div>div:nth-child(1), #voltie>div:nth-child(1)>section>div>div:nth-child(2) {
  595. top: 0 !important;
  596. }
  597. #voltie>div:nth-child(3)>section.voltie_friends {
  598. margin-bottom: 0 !important;
  599. }
  600. .row#voltie {
  601. padding-bottom: 0px !important;
  602. }
  603. #navbar>div {}
  604. #structure>.navbar-inverse {
  605. position: relative;
  606. left: 0;
  607. top: 0;
  608. margin: 0;
  609. padding: 0;
  610. }
  611. #logo>a {
  612. margin-top: 25px !important;
  613. }
  614. #voltie>div:nth-child(1)>section>div:before {
  615. height: 0;
  616. overflow: hidden;
  617. }
  618. #header_stats {
  619. position: relative;
  620. left: 0;
  621. top: 0;
  622. right: 0;
  623. width: 100%;
  624. height: auto;
  625. margin: 0;
  626. padding: 0;
  627. margin-top: 50px;
  628. }
  629. #header_stats>.col-inner {
  630. position: relative;
  631. }
  632. #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container, #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container, #voltie>div.col-md-6>section.voltie_bio>div.spoiler_container {
  633. width: 100%;
  634. position: relative;
  635. left: 0;
  636. top: 0;
  637. margin: 0;
  638. padding: 0;
  639. text-align: center;
  640. float: none;
  641. height: auto;
  642. min-height: 250px;
  643. }
  644.  
  645. }
Add Comment
Please, Sign In to add comment